// See COPYRIGHT.md for copyright information

@import (reference) "clearfix.less";

.tab-area {
  .clearfix();

  background-color: var(--colour-bg-selected);
  width: 100%;
  box-sizing: border-box;
  border-bottom: solid 0.1rem var(--colour-border-grey);
  display: flex;

  .tab {
    float: left;
    padding: 1.2rem;
    cursor: pointer;
    color: var(--colour-text-title);
    border: solid 0.1rem var(--colour-border-grey);
    border-radius: 0.6rem 0.6rem 0 0;
    margin-bottom: -0.1rem;
    flex-shrink: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 20em;
    text-align: left;

    &.active {
      padding: 1.2rem;
      border-bottom-color: var(--colour-bg);
      background-color: var(--colour-bg);
      border-top: solid 0.4rem var(--colour-primary);
    }

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