[data-component-id="drly:tabs"] {
  .tabs  {
    margin: 0 auto calc(var(--default-spacing)*2) auto;
    background: var(--color-light-blue);
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    border-radius:9999px;
    padding: 5px;
    width: fit-content;
    line-height: 17px;
    gap: 5px;


    .tabs__title {
      color: var(--color-medium-blue);
      text-align: center;
      box-sizing: border-box;
      border-radius: 9999px;
      overflow:hidden;
      padding: var(--default-spacing);
      cursor: pointer;

      @media screen and (min-width: 48em) {
        padding: var(--default-spacing) calc(var(--default-spacing)*3);
      }

      &:last-child {
      }

      &:only-child {
        display: none;
      }

      &.selected {
        font-weight: bold;
        background-color: white;
      }

      &:hover:not(.selected) {
        background-color: rgba(255, 255, 255, 0.6);
      }
    }
  }

  .tabs__panel {
    display: none;
  }

  .tabs__panel.selected {
    display: block;
  }
}