@import "../../helpers";
.sf-tabs {
  display: flex;
  flex-wrap: wrap;
  &__title {
    z-index: var(--tabs-title-z-index);
    display: var(--tabs-title-display, flex);
    box-sizing: border-box;
    flex: var(--tabs-title-flex, 0 0 100%);
    justify-content: space-between;
    margin: var(--tabs-title-margin);
    padding: var(--tabs-title-padding, var(--spacer-sm));
    background: var(--tabs-title-background);
    @include border(--tabs-title-border, 0 0 1px 0, solid, var(--c-light));
    color: var(--tabs-title-color);
    transition: color 150ms ease-in-out;
    @include font(
      --tabs-title-font,
      var(--font-weight--normal),
      var(--font-size--base),
      1.4,
      var(--font-family--secondary)
    );
    &.is-active {
      --tabs-title-border-width: 0;
      --tabs-title-color: var(--c-primary);
      --chevron-color: var(--c-primary);
      & + .sf-tabs__content {
        --tabs-content-border-width: var(
          --tabs-content-border-width,
          1px 0 0 0
        );
      }
    }
  }
  &__content {
    flex: 0 0 100%;
    order: var(--tabs-content-order);
    @include border(--tabs-content-border, 0, solid, var(--c-light));
    color: var(--tabs-content-color, var(--c-text));
    @include font(
      --tabs-content-font,
      var(--font-weight--light),
      var(--font-size--base),
      1.6,
      var(--font-family--primary)
    );
    &__tab {
      padding: var(
        --tabs-content-tab-padding,
        var(--spacer-base) var(--spacer-sm)
      );
    }
  }
  &__chevron {
    display: var(--tabs-chevron-display);
  }
  @include for-desktop {
    --tabs-title-z-index: 1;
    --tabs-content-order: 1;
    --tabs-title-flex: 0 0 auto;
    --tabs-title-margin: 0 var(--spacer-lg) -2px 0;
    --tabs-title-padding: var(--spacer-xs) 0;
    --tabs-title-color: var(--c-text-muted);
    --tabs-title-font-size: var(--h4-font-size);
    --tabs-content-tab-padding: var(--spacer-xl) 0;
    --tabs-chevron-display: none;
    &__title {
      &.is-active {
        --tabs-title-border-width: 0 0 2px 0;
        --tabs-title-border-color: var(--c-text);
        --tabs-title-color: var(--c-text);
        & + .sf-tabs__content {
          --tabs-content-border-width: 2px 0 0 0;
        }
      }
      &:hover {
        --tabs-title-color: var(--c-text);
      }
    }
  }
}