@use './colors';

@mixin all {
  .seam-tab-set {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;

    .seam-tab-set-buttons {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: row;
      position: relative;
      padding-top: 8px;
    }

    .seam-tab-set-highlight {
      height: 4px;
      border-radius: 6px 6px 0 0;
      background-color: colors.$primary;
      position: absolute;
      bottom: 0;
      transition: 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
    }

    .seam-tab-button {
      appearance: none;
      width: 140px;
      padding-top: 4px;
      padding-bottom: 12px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      cursor: pointer;
      background-color: transparent;
      box-shadow: none;
      border: none;
      color: colors.$text-gray-2;
      transition: 240ms ease-in-out;

      &:hover,
      &.seam-tab-button-active {
        color: colors.$text-default;
      }
    }
  }
}