@use 'styles/variables.scss' as *;
@use './theme.scss' as *;

.tabs {
  @include tabs-theme-modifiers();

  display: flex;
  border-bottom: 1px solid tabs-theme-color('primary-divider-color');

  & .MuiTab-root {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    background-color: transparent;
    border: 0;
    max-width: 360px;
    min-height: 48px;
    min-width: auto;
    padding: 12px 0;
    color: tabs-theme-color('primary-text');
    text-decoration: none;

    &:hover {
      color: tabs-theme-color('primary-color');
    }

    &::before {
      background-color: tabs-theme-color('primary-color');
    }

    &:not(:first-child) {
      margin-left: 40px;
    }

    & .icon:first-child {
      margin-right: 5px;
    }

    & .tab-content {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    &.Mui-selected::before {
      position: absolute;
      bottom: -2px;
      height: 3px;
      border-radius: 2px;
      content: '';
      width: 100%;
    }
  }

  & .Mui-disabled {
    color: tabs-theme-color('primary-disabled-color') !important;
    cursor: auto;
  }

  & .Mui-selected {
    color: tabs-theme-color('primary-color') !important;
  }

  & .MuiChip-filled {
    height: 15px;
    border-radius: 5px;
    margin-left: 10px;
    background: linear-gradient(180deg, #f5f0eb 0%, #e6e4e1 100%);

    & .MuiChip-label {
      color: #393b40;
      font-family: $font-family;
      font-size: 10px;
      font-weight: bold;
      letter-spacing: 1px;
    }
  }
}