@import 'common/sass/variables';

.SubTabs {
  margin-top: $space-xs;

  .is-electron & {
    margin-top: 0;
  }

  &-tabs {
    display: inline-block;
    white-space: nowrap;

    &-link {
      display: inline-block;
      padding: 8px;
      font-size: $font-size-base;
      min-width: 80px;
      text-align: center;
      font-weight: 300;
      color: color(tab-color);
      border-bottom: 2px solid color(tab-border);
      transition-duration: 100ms;
      opacity: 0.7;

      &:hover {
        opacity: 1;
        color: color(tab-active-color);
      }

      &.is-active {
        color: color(tab-active-color);
        border-bottom-color: color(tab-active-border);
        opacity: 1;
      }

      &.is-disabled {
        color: color(gray-light);
        pointer-events: none;
        text-decoration: line-through;
      }
    }
  }

  &-select {
    margin-bottom: $space-md;
  }
}