@import '../variables/default.scss';
@import '../mixins/index.scss';

$Component: '.at-area-selector';

#{$Component} {
  #{$Component}-tabs {
    .at-tabs__header {
      width: $at-area-tabs-header-width;
      background: $at-area-tabs-header-bg;

      .at-tabs__item {
        font-size: $font-size-slg;
        display: block;
        background: $at-area-tabs-active-bg;

        &.at-tabs__item--active {
          .at-badge {
            background: $at-area-tabs-active-bg;
          }
        }

        &.at-tabs__item--active-before {
          .at-badge {
            border-radius: 0 0 16px 0;
          }
        }

        &.at-tabs__item--active-after {
          .at-badge {
            border-radius: 0 16px 0 0;
          }
        }

        .at-badge {
          background: $at-area-tabs-header-bg;
          width: 100%;
          white-space: normal;
          padding: 30px 20px;
          height: auto;
          line-height: 40px;
          box-sizing: border-box;

          .at-tabs__item-underline {
            right: auto;
            left: 0;
            height: 15px * $hd;
            width: 3px * $hd;
            top: 50%;
            margin-top: -7.5px * $hd;
            border-radius: 10px;
          }
        }
      }
    }

    .at-tabs__body {
      .at-tabs__underline {
        display: none;
      }

      .at-tabs-pane {
        background: #fff;

        &.at-tabs-pane--vertical {
          overflow: auto;
        }

        #{$Component}_list-item {
          margin-left: $spacing-h-lg;
          font-size: $font-size-slg;

          &::after {
            border-color: $color-grey-4;
            right: $spacing-h-lg;
          }

          .item-extra {
            width: auto;
            flex: 0 0 auto;
            display: flex;

            .item-extra__info {
              padding-right: 0;

              .at-tag {
                margin-left: $spacing-h-lg;
                vertical-align: middle;
              }
            }
          }
        }
      }
    }
  }
}