@import '../../../../../styles/core.scss';

.SearchTabs {
  display: flex;
  flex: 0 0 auto;

  &:focus {
    outline: 0;
  }

  // tabs
  :global {
    .Tabs-list {
      border-bottom: 0;
      box-shadow:
        inset 20px 0 0 #fff,
        inset -20px 0 0 #fff,
        inset 0 -3px 0 #eee;
      flex: 0 0 auto;
      overflow-x: auto;
      padding-right: 20px;
      padding-bottom: 3px;
      width: calc(100% - 40px);

      -ms-overflow-style: none; // hidden in IE

      // override reset
      &.Tabs-list {
        width: 100%;
        padding-left: 20px;
      }
    }

    .Tabs-listItem {
      box-shadow:0 3px 0 #eee;
      flex: 0 0 auto;
    }
  }

  &-Tab {
    align-items: center;
    display: flex;

    :global(.icon) {
      flex: 0 0 auto;
      fill: currentColor;
      font-size: 20px;
      height: 20px;
      margin-right: 10px;
      width: 20px;
    }

    &:focus {
      color: var(--project-color-primary, get(color 'blue'));
      outline: none;
    }

    &-Count {
      font-size: 14px;
      font-weight: 400;
      margin-left: 5px;
    }
  }
}