/* *****************************************************************************
*
*  Navbar
*
* ***************************************************************************** */

.tab--input-radio {
  .tab__header {
    border-bottom: none !important;
  }

  .nav-tabs {
    //@include media-breakpoint-down(sm){
    //  flex-wrap: wrap !important;
    //}

    .nav-item {
      width: 100%;
      height: inherit;
      position: relative;
      //z-index: 10;
      margin: 0;
      align-items: start;

      &:before,
      &:after {
        z-index: 20;
      }

      &:not(:last-child) {
        margin: 0 .2rem 0 0;
      }

      .nav-link {
        @extend .px-4;
        @include size(100%);
        background: $gray-100;
        display: flex;
        align-items: center;
        white-space: initial;

        // active line
        &:before {
          top: 0;
          bottom: auto;
        }

        &:not(.active) {
          border: $card-border-width solid $card-border-color;
          border-radius: 0;
          //height: 96%;
          border-bottom: none;
          box-shadow: 0 -10px 5px -10px rgba(0, 0, 0, 0.10) inset;
        }

        &.active {
          box-shadow: 0px 0px 6px 0 rgba(0, 0, 0, 0.18);
          position: relative;
          //z-index: 20;
          background: $white;
          border-left: $card-border-width solid $card-border-color;
          border-right: $card-border-width solid $card-border-color;

          &:after {
            content: "";
            @include size(100%, 5px);
            transform: translateY(4px);
            position: absolute;
            left: 0;
            top: auto;
            bottom: 0;
            background: $white;
            z-index: 20;
          }

          .nav-link__content {
            @extend .form-icon-input-radio--checked;
          }
        }

        .nav-link__content {
          @extend .form-icon-input-radio;
          line-height: 1.2rem;
          padding-left: 2.5rem !important;

          &:before {
            transform: translate(0, -50%);
          }

          &:after {
            transform: translate(0, -50%) scale(0.35);
          }
        }
      }
    }
  }

  .tab__section-content {
    padding-top: 0;
  }

  .tab-content {
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.10);
    position: relative;
    z-index: 2;
    border-top: $border-width solid $border-color;
  }

  // input tab inside MODAL
  // ----------------------------------------
  .modal & {
    .nav-tabs {
      &::before,
      &::after {
        @include size(100%);
        content: "";
        position: absolute;
        transform: translate(-100%);
        border-bottom: $border-width solid $border-color;
        bottom:-1px;
        top: auto;
      }

      &::after {
        transform: translate(100%);
      }
    }

    .tab-content {
      box-shadow: none;
      padding-top: $spacer-4;
    }
  }
}