@import '../../variables.scss';

.au-tabs {
  width: 100%;
  background: #fff;

  .au-tab-pane-head {
    margin: 0;
    height: 40px;
    line-height: 40px;
    padding-left: 0;
    display: flex;
    flex-direction: row;

    .au-tab-pane-title {
      flex: auto;
      list-style: none;
      font-size: 14px;
      color: black;
      cursor: pointer;
      text-align: center;

      i {
        font-size: 13px;
        vertical-align: -4%;
        margin-right: 5px;
      }

      .au-tab-pane-text {
        border-bottom: 1px solid transparent;
      }

      &.au-tab-pane-title-active {
        .au-title-close {
          color: var(--color-primary-40);
        }

        .au-tab-pane-text {
          color: var(--color-primary-40);
          border-bottom: 1px solid var(--color-primary-40);
        }
      }
    }

    .au-title-close {
      padding-left: 8px;
      cursor: pointer;
      vertical-align: 1%;
      font-size: 16px;
      color: black;

      &:hover {
        color: black;
      }
    }
  }

  .au-tab-pane-content {
    padding: 15px 20px 0;
    box-sizing: border-box;
    background: #FFF;
    transition: all .3s cubic-bezier(.78, .14, .15, .86);
  }

  &.au-tabs-cards {
    .au-tab-pane-head {
      background: #dfdfdf;
      border-bottom: none;

      .au-tab-pane-title {
        &.au-tab-pane-title-active {
          color: black;
          background: #fff;
        }
      }
    }
  }

  &.au-tabs-split {
    .au-tab-pane-head {
      border-bottom: 2px solid #fff;

      .au-tab-pane-title {
        border-bottom: 2px solid #eee;
        &.au-tab-pane-title-active {
          border-bottom: 2px solid var(--color-primary-40);
        }

        .au-tab-pane-text{
          border-bottom: none;
        }
      }
    }
  }

}