@use '../helpers/functions' as *;

$tabs-bg-color: $neutral-30;
$tabs-bg-color-active: $neutral-20;
$tabs-bg-color-hover: $neutral-40;
$tabs-font-color: $neutral-90;
$tabs-font-color-active: $neutral-90;
$tabs-font-color-hover: $neutral-90;

.lang-tabs {
  position: relative;

  &__wrapper {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    background: $tabs-bg-color;
    border-top-left-radius: $code-snippet-border-radius;
    border-top-right-radius: $code-snippet-border-radius;
    position: relative;
    overflow-x: scroll;
    overflow-y: hidden;
    scrollbar-width: none;
    &::-webkit-scrollbar {
      display: none;
    }
  }

  &__overlay {
    display: block;
    height: 0.7rem;
    background: $tabs-bg-color-active;
    width: 100%;
    position: absolute;
    bottom: -0.7rem;
    left: 0;
    right: 0;
    z-index: 1;
  }

  &__text {
    display: none;
    @include media-breakpoint-up(md) {
      display: inline-block;
      margin-bottom: 4px;
    }
  }

  &__icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: $tabs-font-color;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-image: url('/icons/outline/http.svg');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-image: url('/icons/outline/http.svg');

    &_python {
      -webkit-mask-image: url('/icons/outline/python.svg');
      mask-image: url('/icons/outline/python.svg');
    }

    &_typescript {
      -webkit-mask-image: url('/icons/outline/typescript.svg');
      mask-image: url('/icons/outline/typescript.svg');
    }

    &_rust {
      -webkit-mask-image: url('/icons/outline/rust.svg');
      mask-image: url('/icons/outline/rust.svg');
    }

    &_java {
      -webkit-mask-image: url('/icons/outline/java.svg');
      mask-image: url('/icons/outline/java.svg');
    }

    &_csharp {
      -webkit-mask-image: url('/icons/outline/csharp.svg');
      mask-image: url('/icons/outline/csharp.svg');
    }
    &_go {
      -webkit-mask-image: url('/icons/outline/go.svg');
      mask-image: url('/icons/outline/go.svg');
    }
  }

  &__button {
    display: flex;
    min-height: 44px;
    padding: 10px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: $tabs-font-color;
    position: relative;
    flex-wrap: wrap;

    &:not(.active):hover {
      background: $tabs-bg-color-hover;
      color: $tabs-font-color-hover;
      cursor: pointer;

      .lang-tabs__icon {
        background-color: $tabs-font-color-hover;
      }

      &:after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 1px;
        background: $tabs-bg-color-hover;
        z-index: 1;
      }

      .lang-tabs__icon {
        background-color: $tabs-font-color-hover;
      }
    }

    &.active {
      background: $tabs-bg-color-active;
      color: $tabs-font-color-active;

      .lang-tabs_icon {
        background-color: $tabs-font-color-active;
      }

      &:after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 100%;
        height: 1px;
        background: $tabs-bg-color-active;
        z-index: 1;
      }

      & .lang-tabs__icon {
        background-color: $tabs-font-color-active;
      }
    }
  }
}