/**=====================
  2.28 Tab CSS Start
==========================**/

@use 'sass:list';
@use 'sass:color';
@use "../utils/variables" as *;
@use "../utils/mixin" as *;
@use "../base/reset" as *;


.nav-pills {

  .nav-link.active,
  .show>.nav-link {
    background-color: var(--theme-default);
  }
}

.main-vertical-tab {
  .nav {
    .nav-link {
      display: flex;
      align-items: center;
      gap: 8px;
    }
  }
}

.nav {
  i {
    margin-right: 10px;
  }
}

.nav-right {
  justify-content: flex-end;
}

$nav-name: theme,
  primary,
  secondary,
  success,
  danger,
  info,
  light,
  dark,
  warning;
$nav-color: var(--theme-default),
  var(--theme-default),
  $secondary-color,
  $success-color,
  $danger-color,
  $info-color,
  $light-color,
  $dark-color,
  $warning-color;

@each $var in $nav-name {
  $i: list.index($label-name, $var);

  .nav-#{$var},
  .nav-pills.nav-#{$var} {
    .nav-link {
      color: list.nth($nav-color, $i);
    }

    .nav-link.active,
    .show>.nav-link {
      background-color: list.nth($nav-color, $i);
      color: $white;
    }
  }
}

.nav-tabs.nav-bottom {
  .nav-item {

    .nav-link.active,
    .nav-link.focus,
    .nav-link.hover {
      border-color: $white #dee2e6 #dee2e6;
    }
  }
}

.tab-content {
  ~.nav-tabs {
    &.border-tab {
      margin-bottom: 0;
      margin-top: 30px;
    }
  }
}

.border-tab.nav-tabs {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  margin-bottom: 30px;

  .nav-item {
    .nav-link {
      font-size: 16px;
      color: $dark-color;
      text-align: center;
      padding: 10px 25px;
      border: none;
      border-bottom: none;
      transition: 0.3s;

      @media (min-width: 576px) and (max-width: 1920px) {
        padding-top: 0;
      }

      &.active,
      &.show,
      &:focus,
      &:hover {
        color: var(--theme-default);
      }

      &.active,
      &.show,
      &:focus {
        border-bottom: none;
      }
    }
  }
}

.border-tab.nav-left {
  .nav-link {
    transition: all 0.3s ease;
    color: $dark-color;
  }

  .nav-link.active,
  .show>.nav-link {
    background-color: transparent;
    border-left-color: var(--theme-default);
    color: var(--theme-default);
    border-radius: 0;
    transition: all 0.3s ease;
  }
}

.border-tab.nav-right {
  .nav-link {
    border-right: 2px solid transparent;
    transition: all 0.3s ease;
    color: $dark-color;
    text-align: right;
  }

  .nav-link.active,
  .show>.nav-link {
    background-color: transparent;
    border-right-color: var(--theme-default);
    color: var(--theme-default);
    border-radius: 0;
    transition: all 0.3s ease;
  }
}

$m-nav-name: theme,
  primary,
  secondary,
  success,
  danger,
  info,
  light,
  dark,
  warning;
$nav-color: var(--theme-default),
  var(--theme-default),
  $secondary-color,
  $success-color,
  $danger-color,
  $info-color,
  $light-color,
  $dark-color,
  $warning-color;

@each $var in $m-nav-name {
  $i: list.index($label-name, $var);

  .border-tab.nav-#{$var} {

    .nav-link.active,
    .nav-item.show,
    .nav-link:focus,
    .nav-link:hover {
      color: list.nth($nav-color, $i);
      background-color: transparent;
    }

    .nav-item {
      .nav-link {
        transition: 0.3s;

        &.active,
        &.show,
        &:focus {
          border-bottom: 2px solid list.nth($nav-color, $i);
        }

        &.active,
        &.show,
        &:focus,
        &:hover {
          color: list.nth($nav-color, $i);
        }
      }
    }
  }

  .border-tab.nav-left.nav-#{$var} {

    .nav-link.active,
    .show>.nav-link {
      border-left-color: list.nth($nav-color, $i);
      color: list.nth($nav-color, $i);
    }
  }

  .border-tab.nav-right.nav-#{$var} {

    .nav-link.active,
    .show>.nav-link {
      border-right-color: list.nth($nav-color, $i);
      color: list.nth($nav-color, $i);
    }
  }
}

.flex-space {
  display: flex;
  gap: 16px;

  @media (max-width:576px) {
    justify-content: center;
  }
}

.tab-img {
  height: 100px;
}

.nav-item {
  .navlink-title {
    background-color: unset;
    padding: 8px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;

  }
}

.simple-wrapper {
  .dropdown-collection {
    .dropdown-item {

      &:hover,
      &:active {
        background-color: $gray-60 !important;
      }
    }
  }
}

.blog-wrapper {
  .blog-img {
    height: 100px;

    @media (max-width:500px) {
      height: 75px;
    }
  }
}

.designer-details {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;

  @media (max-width:1540px) {
    gap: 14px;
  }

  .designer-profile {
    display: inline-block;

    .designer-wrap {
      display: flex;
      align-items: center;
      gap: 12px;


      .designer-img {
        height: calc(38px + (50 - 38) * ((100vw - 320px) / (1920 - 320)));
        border-radius: 100%;
      }

      .designer-content {
        h6 {
          font-weight: 500;
        }

        p {
          color: $light-text;
        }
      }
    }
  }
}

.nav-tabs {
  .nav-border {
    color: $black;
    border: none;
  }
}

.ico-color {
  color: $warning-color;
  font-size: 16px;
}

.main-inbox {
  .header-inbox {
    @include pixelstrap-flex(flex, space-between, center);
    border-bottom: 1px solid $light-text;
    padding-bottom: 8px;

    .header-left-inbox {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;

      .inbox-img {
        img {
          width: 50px;
          height: 50px;
          border-radius: 100%;
        }
      }
    }

    .header-right-inbox {
      display: flex;
      gap: 12px;

      @media (max-width: 560px) {
        display: none;
      }
    }
  }

  .body-inbox {
    .body-h-wrapper {
      display: flex;
      padding-bottom: 6px;
      border-bottom: 1px solid var(--light-border);
      align-items: center;

      @media (max-width:630px) {
        align-items: unset;
      }
    }
  }
}

.tab-space {
  font-size: 14px;
}

$tabs-name: primary,
  secondary,
  success,
  danger,
  warning,
  info,
  light,
  dark;

$tab-color : $primary-color,
$secondary-color,
$success-color,
$danger-color,
$warning-color,
$info-color,
$light-color,
$dark-color;

@each $var in $tabs-name {
  $i: list.index($tabs-name, $var);

  #bottom-tab {
    .nav-border {
      &.tab-#{$var} {
        &:hover {
          color: list.nth($tab-color, $i);
        }

        &:focus,
        &:active,
        &.active {
          color: list.nth($tab-color, $i);
          border-bottom: 2px solid list.nth($tab-color, $i);
        }
      }
    }
  }
}

#sideline-tab {
  .nav-effect {
    display: inline-block;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      left: 0;
      display: inline-block;
      height: 14px;
      width: 80%;
      border-bottom: 1px solid;
      margin-top: 10px;
      opacity: 0;
      -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
      transition: opacity 0.35s, transform 0.35s;
      transform: scale(0, 1);
    }

    &:hover {
      &::after {
        opacity: 1;
        transform: scale(1);
      }
    }

    @media (max-width:576px) {
      text-align: center;

      &::after {
        width: 100%;
      }
    }
  }
}

.tabs-responsive-side {
  .border-tab {
    &.nav-secondary {
      &.nav-left {
        .nav-link {

          &:hover,
          &.active {
            background-color: unset;
            border-left: none;
            border-radius: 0;
            transition: none;
          }
        }
      }
    }
  }
}

.pills-blogger {
  @media (max-width: 576px) {
    justify-content: center;
    flex-wrap: wrap;
  }
}

::placeholder {
  font-size: 14px;
}

.material-wrapper {
  display: flex;
  gap: 12px;

  @media (max-width:576px) {
    flex-direction: column;
    align-items: center;
  }
}

.bg-navbar {

  .nav {
    justify-content: flex-end;
    background-color: $light-color;
    border-radius: 8px;

    .nav-item {
      .nav-link {
        color: $dark-gray;

        &.active {
          background-color: $primary-color;
          color: $white;
        }
      }
    }
  }

  .skill-tab {
    .form-control {
      width: 45%;
    }

    ul {
      list-style-type: circle;
      margin-left: 16px;

      [dir="rtl"] & {
        margin-left: unset;
        margin-right: 16px;
      }

      li {
        padding-bottom: 4px;

        &:last-child {
          padding-bottom: unset;
        }
      }
    }
  }

  img {
    height: calc(160px + (245 - 160) * ((100vw - 320px) / (1920 - 320)));

    @media (max-width:500px) and (min-width:356px) {
      height: 118px;
    }

    @media (max-width:355px) {
      height: 80px;
    }
  }
}

.arrow-tabs {
  &.bg-navbar {
    .tab-content {
      .common-box {
        p {
          @media (max-width:1694px) {
            display: -webkit-box;
            -webkit-line-clamp: 5;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }

    .nav {
      justify-content: flex-start;
      border-radius: 0;

      .nav-item {
        clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%);

        [dir="rtl"] & {
          clip-path: polygon(15% 0%, 0% 50%, 15% 100%, 100% 100%, 100% 0%);
        }

        .nav-link {
          &.active {
            border-radius: 0;
            background-color: var(--theme-default);
          }
        }
      }
    }

    .common-box {
      @include pixelstrap-flex(flex, center, baseline);
      gap: 18px;

      &:first-child {
        p {
          margin-bottom: 14px;
        }
      }
    }
  }

  i {
    font-size: calc(13px + (16 - 13) * ((100vw - 320px) / (1920 - 320)));
    color: $badge-light-color;

    [dir="rtl"] & {
      transform: scaleX(-1);
    }
  }
}

.bottom-navbar {
  .nav {
    &.nav-pills {
      justify-content: center;

      .nav-item {
        flex: 1 1 0;

        .nav-link {
          text-align: center;

          img {
            height: 20px;
            margin-right: 8px;
            filter: grayscale(1);
            transition: all 0.3s ease;

            [dir="rtl"] & {
              margin-right: unset;
              margin-left: 8px;
            }
          }

          &.active {
            img {
              filter: grayscale(0);
              transition: all 0.3s ease;
              transform: scale(1.2);
            }
          }
        }
      }

    }
  }

  .tab-content {
    .common-flex {
      margin-bottom: 18px;

      img {
        height: 20px;
      }
    }

    .tab-paragraph {
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin-bottom: 14px;

      i {
        font-size: calc(13px + (16 - 13) * ((100vw - 320px) / (1920 - 320)));
        color: $badge-light-color;

        [dir="rtl"] & {
          transform: scaleX(-1);
        }
      }
    }
  }
}

.horizontal-icons-tab {
  .nav-tabs {
    margin: 0;
    background-image: linear-gradient(135deg, var(--light-bg) 0%, var(--light-bg) 100%);
    @include pixelstrap-flex(flex, flex-start, center);
    border-radius: 2px 2px 0px 0px;
    flex-wrap: wrap;

    @media (max-width:764px) {
      row-gap: 8px;
    }

    .nav-item {
      .nav-link {
        background: transparent;
        background-image: linear-gradient(90deg, transparent 70%, rgba(255, 255, 255, 0.2) 100%);
        border: none;
        outline: none;
        cursor: pointer;
        position: relative;
        @include pixelstrap-flex(flex, center, center);
        overflow: hidden;
        transition: 0.3s ease;
        border-radius: 0;
        padding-top: 10px;

        @media (max-width:1529px) and (min-width:1400px) {
          padding-inline: 12px;
        }

        i {
          color: var(--body-font-color);
          opacity: 0.8;
          z-index: 2;

          [dir="rtl"] & {
            margin-right: unset;
            margin-left: 10px;
          }
        }

        &::before {
          background-image: linear-gradient(135deg, var(--theme-default) 0%, $info-color 100%);
          content: "";
          width: 100%;
          height: 0px;
          position: absolute;
          top: 0;
          left: 0;
          transition: 0.3s ease-in-out;
          z-index: 2;
        }

        &:hover,
        &::before {
          height: 100%;
          z-index: 2;
          bottom: 0;
        }

        &.active {
          background-color: var(--white);
          z-index: 0;
          border-right: 0px;
          border-left: 0px;
          bottom: 0px;
          overflow: hidden;
          color: $primary-color;

          &:hover {
            span {
              opacity: 1;
              background-color: $white;
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }
          }
        }

        &::before {
          content: "";
          width: 100%;
          height: 2px;
          top: 0;
          left: 0;
        }

        span {
          opacity: 0.6;
          @include pixelstrap-flex(flex, center, center);
          z-index: 2;
          transition: 0.5s ease;
          padding: 0;
          margin: 0;
          color: var(--body-font-color);
          backface-visibility: hidden;
          font-weight: 400;

          &::before {
            content: attr(data-title);
            position: absolute;
            @include pixelstrap-size(auto, auto);
            color: $white;
            @include pixelstrap-flex(flex, center, center);
            opacity: 0.1;
            font-size: 40px;
            transition: 1s ease-out;
            z-index: -1;
            font-weight: 600;
            top: 110%;
          }
        }

        &:hover {
          span {
            color: $white;
            opacity: 1;
          }

          &::before {
            height: 100%;
            z-index: 2;
            bottom: 0;
          }

          i {
            color: $white;
          }
        }
      }
    }
  }
}

.bottom-border-tab {
  .nav {
    .nav-item {
      .nav-link {
        border-bottom: 2px solid $transparent-color;
      }
    }
  }
}

/**=====================
    2.28 Tab CSS Ends
==========================**/