exadel-inc/esl

@import (reference) './variables.less';
 
.esl-d-tab-group {
  &,
  & > .esl-d-tab-panel {
    border-radius: calc(0.5rem - 1px);
  }
 
  & > .esl-d-accordion-header {
    border-radius: calc(0.5rem - 1px);
    transition: border-radius 0s linear 0.5s;
    &[active] {
      color: @primary-blue;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      transition: border-radius 0s linear;
    }
  }
  .esl-d-tab-body {
    padding: 1.25rem;
  }
}
 
.esl-d-tabs.esl-accordion-view {
  > .esl-d-tab-control {
    display: none;
  }
  > .esl-d-tab-group > .esl-d-tab-panel {
    background: #fff;
    border: 1px solid @secondary-blue;
 
    margin-bottom: 0.5rem;
  }
 
  > .esl-d-tab-group > .esl-d-accordion-header {
    display: block;
    background: #fff;
    border: 1px solid @secondary-blue;
 
    & + .esl-d-tab-panel {
      border-top: none;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
  }
}
 
.esl-d-tabs.esl-tabs-view {
  > .esl-d-tab-control {
    position: relative;
    z-index: 1;
    margin-bottom: -1px;
  }
  > .esl-d-tab-group > .esl-d-accordion-header {
    display: none;
  }
  > .esl-d-tab-group {
    background: #fff;
    &[has-opened] {
      border: 1px solid @secondary-blue;
    }
  }
}
 
.esl-d-tab-list {
  margin: 0;
  > .esl-d-tab-item {
    list-style: none;
  }
}
 
.esl-d-tab-item > esl-tab {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
  min-height: 100%;
  margin: 0;
  padding: 0.5rem 1rem;
 
  border: 1px solid transparent;
  border-bottom: none;
  border-top-left-radius: calc(0.5rem - 1px);
  border-top-right-radius: calc(0.5rem - 1px);
 
  transition:
    border-color 0.25s linear,
    border-bottom-color 0s linear,
    background-color 0.25s linear,
    color 0.25s linear;
 
  &:focus,
  &:hover {
    @inactive-color: mix(@secondary-blue, #ccc, 50);
    border-color: @inactive-color @inactive-color @secondary-blue;
  }
 
  &.active {
    color: @primary-blue;
    background-color: #fff;
    border-color: @secondary-blue @secondary-blue #fff;
  }
 
  @media @sm {
    max-width: 400px;
  }
  @media @md-xl {
    max-width: 600px;
  }
}