@use '../abstract/_all';
@use '../abstract/fonts';
@use '../abstract/mixins';
@use '../abstract/setup';

.tabs {
  .list-equal {
    display: flex;
    align-items: flex-end;

    li {
      flex-grow: 1;
    }
  }

  ul {
    align-items: center;
    border-bottom: 1px solid setup.$c-middle-grey;
    display: flex;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: flex-start;
    margin: 0;

    @include mixins.font-regular;
  }

  li {
    display: block;
    margin: 0;

    a,
    span {
      align-items: center;
      border-bottom: 1px solid setup.$c-middle-grey;
      color: setup.$c-dark-grey;
      display: flex;
      justify-content: center;
      margin-bottom: -1px;
      padding: setup.$padding-global * 2;
      vertical-align: top;
      padding-bottom: setup.$padding-global * 2 + 1;
      font-size: setup.$tabs-text;

      &:hover {
        border-bottom-color: setup.$c-primary;
        border-bottom-width: 2px;
        padding-bottom: setup.$padding-global * 2 - 0;
        color: setup.$c-primary;
        cursor: pointer;
      }
    }

    &.is-active a,
    &.is-active span {
      border-bottom-color: setup.$c-primary;
      border-bottom-width: 2px;
      padding-bottom: setup.$padding-global * 2 - 0;
      color: setup.$c-primary;

      @include mixins.font-bold;
    }

    &::after {
      display: none;
    }
  }

  &.is-center ul {
    justify-content: center;
  }

  &.is-around {
    ul {
      justify-content: space-around;

      li {
        flex: 1;

        span {
          border-bottom-width: 1px;
        }
      }
    }
  }
}

.tabs-list {
  margin-left: -8px;

  li {
    margin: 0;
    padding-left: 8px;
    padding-right: 8px;

    span {
      position: relative;

      &:hover {
        cursor: pointer;

        &::after {
          content: '';
          width: 100%;
          background: setup.$c-primary;
          height: 2px;
          position: absolute;
          bottom: -4px;
          left: 0;
        }
      }
    }

    &.is-active span {
      &::after {
        content: '';
        width: 100%;
        background: setup.$c-primary;
        height: 2px;
        position: absolute;
        bottom: -4px;
        left: 0;
      }
    }
  }
}

.tabs-gray {
  border: none;
  position: relative;
  width: 100%;
  background-color: setup.$c-light-grey;

  ul {
    border: none;
  }

  li {
    display: block;
    margin: 0;
    width: 100%;
  }

  a,
  span {
    @include mixins.font-regular;

    color: setup.$c-dark-grey;
    border-color: setup.$c-light-grey;
    position: relative;

    &:hover {
      color: setup.$c-primary;
      cursor: pointer;
    }
  }
}

.tabs-clear li {
  display: block;
  margin: 0;
  width: 100%;
}

.tabs-mini {
  display: inline-block;

  ul {
    border: none;
    background-color: setup.$c-white;
    padding: 0 14px;
    display: inline-flex;
    font-family: fonts.$font-family-a-r;
  }

  li {
    position: relative;
  }

  li a {
    opacity: 0.5;
    border: none;
    padding: 6px 8px 8px;
    color: setup.$c-primary;
  }

  li:first-child a::after {
    content: '';
    position: absolute;
    right: 0;
    width: 1px;
    height: 20px;
    background-color: setup.$c-middle-grey;
  }

  li a:hover {
    border: none;
    cursor: pointer;
    padding: 6px 8px 8px;
    opacity: 1;
  }

  li.is-active a {
    padding: 6px 8px 8px;
    opacity: 1;
    font-family: fonts.$font-family-a-b;
  }

  &.tabs-map {
    max-width: 450px;
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-end;

    ul {
      border: 1px solid setup.$c-middle-grey;
    }
  }
}