@use "../abstracts/mixins";

$border-radius: 19px;

.tabBarFrame {
  position: relative;
}

.tabBar {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  background: var(--table-background);
  border-radius: $border-radius;
  padding: 2px;
  margin-bottom: var(--section-padding);

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    border: var(--jenkins-border-width) solid var(--card-border-color);
    border-radius: inherit;
    pointer-events: none;
  }

  .tab {
    float: left;
  }
}

.tabBar .tab a {
  @include mixins.item($border: false);

  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 1.2rem;
  border-radius: $border-radius;
  color: var(--tabs-item-foreground);
  font-weight: normal;
  font-size: var(--font-size-sm);
  min-width: 3.75rem;

  &::before,
  &::after {
    inset: 2px;
  }
}

.tabBar .tab .addTab svg {
  width: 1.125rem;
  height: 1.125rem;
}

.tabBar .tab [type="radio"] {
  display: none;
}

.tabBar .tab.active a {
  z-index: 2;
  cursor: default;
  font-weight: 450;
  color: var(--tabs-item-foreground--active);

  &::before {
    background-clip: padding-box;
    background-color: var(--tabs-item-background--selected) !important;
    border: var(--jenkins-border--subtle) !important;
  }

  &::after {
    display: none;
  }

  &::before,
  &::after {
    inset: 0;
  }
}

.jenkins-tab-pane__title {
  font-size: 1.6rem;
  margin: 2.2rem 0 1.4rem;
  padding: 0;
}

.app-build-tabs {
  position: relative;
  display: inline-flex;
  gap: 0.25rem;
  margin-left: -0.25rem;

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    border: var(--jenkins-border--subtle);
    border-radius: 100px;
    opacity: 0;
    transition: var(--standard-transition);
  }

  &:hover::before {
    opacity: 1;
    inset: -4px;
    background: var(--card-background);
  }

  a {
    border-radius: 100px;

    svg {
      width: 1rem;
      height: 1rem;

      * {
        stroke-width: 40px;
      }
    }

    &:not(.jenkins-button--tertiary) {
      pointer-events: none;
      font-weight: var(--font-bold-weight);

      .pill::before {
        border: var(--jenkins-border-width) solid
          color-mix(in sRGB, var(--color, currentColor) 20%, transparent);
      }
    }

    &.jenkins-button--tertiary {
      color: color-mix(
        in sRGB,
        var(--text-color-secondary) 75%,
        var(--text-color)
      ) !important;

      &::before,
      &::after {
        inset: 3px;
      }
    }

    &:hover {
      color: var(--text-color) !important;

      &::before,
      &::after {
        inset: 1.5px;
      }

      .pill::before {
        border: var(--jenkins-border-width) solid
          color-mix(in sRGB, var(--color, currentColor) 20%, transparent);
      }
    }

    .pill {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 100px;
      font-size: 12px;
      min-width: 20px;
      text-align: center;
      padding-inline: 6px;
      text-box: cap alphabetic;
      height: 20px;
      z-index: 0;
      margin-right: -0.25rem;
      transition: border var(--standard-transition);

      &::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: color-mix(
          in sRGB,
          var(--color, var(--background)) 5%,
          var(--background)
        );
        border: var(--jenkins-border-width) solid
          color-mix(in sRGB, var(--color, currentColor) 10%, transparent);
        z-index: -1;
      }
    }
  }
}
