// See COPYRIGHT.md for copyright information

@import (reference) "clearfix.less";

.tab-area {
  .clearfix();

  background-color: #e3e3e3;
  width: 100%;
  box-sizing: border-box;
  border-bottom: @simple-border;
  display: flex;

  .tab {
    float: left;
    padding: 1.2rem;
    cursor: pointer;
    color: #444;
    border: solid 0.1rem #cbcbcb;
    border-top-left-radius: 0.6rem;
    border-top-right-radius: 0.6rem;
    margin-bottom: -0.1rem;
    flex-shrink: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 20em;

    &.active {
      padding: 1.2rem;
      border-bottom-color: #fff;
      background-color: #fff;
      border-top: solid 0.4rem #0085e6;
    }

    &:not(.active) {
      padding-top: 1.5rem;
    }
  }
}
