@import '../../core';

.bfo-tabs {
  position: relative;
  display: block;
  color: var(--bfo-color-brand-heading);
  &__wrapper {
    position: relative;
    margin: 0px;
    width: 100%;
    display: flex;
    align-items: center;
    padding-bottom: var(--bfo-spacing-base-l);
    margin-bottom: var(--bfo-spacing-base-l);
  }
  &__item-wrapper {
    padding-right: var(--bfo-spacing-base-xxl);
    &:hover {
      cursor: pointer;
    }
    &:focus {
      outline: 0;
    }
  }
  &__item {
    position: relative;
    color: var(--bfo-color-brand-gray-light);
    margin-bottom: 0;

    & ~ .bfo-tabs__item::after {
      right: 0;
      left: 100%;
    }

    &--active::after {
      right: 0;
      left: 0;
    }
    &--active {
      color: var(--bfo-color-brand-heading);
    }
  }
  &__slider {
    background: var(--bfo-color-brand-accent);
    height: 4px;
    position: absolute;
    bottom: 0;
    transition: all 0.3s ease-out;
    left: 0;
  }
  &__panel {
    z-index: 0;
    display: none;
    &--active {
      display: block;
      z-index: 1;
    }
  }
}