@include export-module('co-tab-bar') {
  .tab-bar-primary {
    background-color: $sc-tab-bar-background-color;
    border-radius: $sc-tab-bar-border-radius;
    display: flex;
    font-size: $sc-font-size;
    gap: $sc-tab-bar-gap;
    padding: $sc-tab-bar-padding;
    position: absolute;
    top: 10px;
    left: 0;
    .co-button {
      margin: $sc-tab-bar-button-margin;
      padding: $sc-tab-bar-button-padding;
      border-radius: $sc-tab-bar-border-radius;
      border: none;
      background-color: transparent;
      cursor: pointer;
      user-select: none;
      font-size: $sc-font-size;
      font-family: $sc-font-family;
      border-bottom: 2px solid transparent;
      span {
        font-size: $sc-font-size;
        text-align: center;
        font-weight: bold;
        color: $sc-color-font;
      }
      &:hover {
        filter: brightness(100%);
      }
      &.active {
        span {
          color: #1A73E8;
        }
      }
    }
  }

  .tab-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
  }

  .tab-bar-wrapper {
    display: grid;
    grid-template-columns: 15% 70% 15%;
    margin: 5px 0;
  }

  .secondary-tab-bar {
    background-color: $sc-tab-bar-background-color;
    border-radius: $sc-tab-bar-border-radius;
    display: flex;
    font-size: $sc-font-size;
    gap: $sc-tab-bar-gap;
    padding: $sc-tab-bar-padding;
    .co-button {
      margin: $sc-tab-bar-button-margin;
      padding: $sc-tab-bar-button-padding;
      border-radius: $sc-tab-bar-border-radius;
      border: none;
      background-color: transparent;
      cursor: pointer;
      user-select: none;
      font-size: $sc-font-size;
      font-family: $sc-font-family;
      border-bottom: 2px solid transparent;
      span {
        font-size: $sc-font-size;
        text-align: center;
        font-weight: bold;
        color: $sc-color-font;
      }

      &.active {
        background-color: white;
        border-bottom: 2px solid #1A73E8;
      }
    }
  }

}