@import './mixins/mixins.scss';
@import './theme/default.scss';

@include b(tab) {
  width: 100%;
  height: 100%;
  background-color: #171D33;
  .n-tab--label {
    display: flex;
    align-items: center;
    justify-items: flex-start;
    font-weight: bold;
    font-size: 15px;
    margin-top: 8px;
    margin-bottom: 8px;
    color: #ffffff;
    // .n-tab--label-item:not(:last-child) {
    //   margin-right: 25px;
    // }
    .n-tab--label-item {
      margin-left: 25px;
      padding-bottom: 8px;
      // .n-tab--label-content {
        // padding-bottom: 8px;
        // border-bottom: 0px solid rgba(99, 226, 183, 1);
      // }
      .n-tab--label-delete {
        display: none;
        margin-left: 9px;
      }
      &:hover {
        color: #55E8C7;
        // border-bottom: 2px;
        // border-bottom: 2px solid rgba(99, 226, 183, 1);
      }
     
    }
    .n-tab--label-item_active {
      color: #63E2B7;
      // border-bottom: 2px;
      border-bottom: 2px solid rgba(99, 226, 183, 1);
    }
    .n-tab--label-item_delete {
      .n-tab--label-delete {
        display: inline-block;
      }
    }
    .n-tab--label-item_disabled {
      color: #FFFFFF; 
      opacity: 0.3;
      pointer-events: none;
    }
    .n-tab--label-item_card {
      margin-left: 0;
      margin-right: 6px;
      padding: 8px 16px;
      border-radius: 6px 6px 0 0;
      background-color: rgba(255, 255, 255, 0.3);
      .n-tab--label-content {
        border: none;
        color: #50E3C2
      }
      &.n-tab--label-item_active {
        border: none;
      }
      &:hover {
        color: #55E8C7;
        border: none;
      }
      &.n-tab--label-item_close {
        .n-tab--label-delete {
          display: inline-block;
          margin-left: 9px;
        }
      }
    }
    // .n-tab--label-item_active {
    //   color: #63E2B7;
    //   // border-bottom: 2px;
    //   border-bottom: 2px solid rgba(99, 226, 183, 1);
    // }
    .n-tab--label-add {
      display: none;
    }
    &.n-tab--label_addable {
      .n-tab--label-add {
        display: inline-block;
      }
    }
  }
  .n-tab--slot {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
}

@include b(tab-panel) {
  flex-shrink: 0;
  width: 100%;
  visibility: hidden;
  transition: transform 0.2s;
  height: 0;
  &.n-tab-panel_active {
    visibility: visible;
    height: 100%;
  }
}