@import 'style/theming';

.tabbed {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;

  &--vertical {
    @media screen and (min-width: 1024px) {
      flex-direction: row;
    }
  }

  &__menu {
    display: flex;
    width: 100%;
    white-space: nowrap;
    overflow-x: auto;

    &--vertical {
      flex-direction: column;
      min-width: 15rem;
    }
  }

  &__menu-button {
    display: flex;
    width: 100%;
    padding: .6rem;
    @include themed() {
      color: t(foreground-color);
    }

    &--active {
      background: lightblue;
    }
  }

  &__content {
    flex: 1;
  }
}