$label-max-width: 100%;
$label-close-button: '.gl-label-close.gl-button';

.gl-label {
  @include gl-align-items-center;
  @include gl-bg-white;
  @include gl-overflow-hidden;
  @include gl-display-inline-flex;
  @include gl-rounded-pill;
  @include gl-relative;
  @include gl-max-w-full;
  @include gl-font-base;
  box-shadow: var(--label-inset-border) !important;

  &:not(.gl-label-scoped) {
    background-color: var(--label-background-color);
  }

  &:focus-within {
    @include gl-focus($gl-border-size-2, var(--label-background-color), true);
  }

  .gl-label-link {
    @include gl-line-height-normal;
    @include gl-display-flex;
    @include gl-font-sm;
    @include gl-font-weight-normal;
    @include gl-overflow-hidden;
    @include gl-reset-color;
    @include gl-max-w-full;

    &:focus,
    &:hover {
      @include gl-reset-color;
      @include gl-shadow-none;

      .gl-label-text-scoped {
        @include gl-text-decoration-underline;
      }
    }
  }

  .gl-label-text,
  .gl-label-text-scoped {
    @include gl-display-block;
    @include gl-px-3;
    @include gl-py-2;
    @include str-truncated($label-max-width);
  }

  > #{$label-close-button} {
    @include gl-border-0;
    @include gl-display-flex;
    @include gl-ml-n2;
    @include gl-mr-2;
    @include gl-p-0;
    @include gl-rounded-full;
    @include gl-shadow-none;

    &[disabled],
    &[disabled]:hover,
    &[disabled]:focus {
      @include gl-opacity-5;
      @include gl-reset-bg;
      @include gl-shadow-none;

      .gl-icon {
        @include gl-fill-current-color;
      }
    }

    &:focus,
    &:active {
      @include gl-focus;
    }

    .gl-icon {
      @include gl-p-1;
    }
  }
}

.gl-label-text-dark {
  @include gl-text-gray-950;

  #{$label-close-button} {
    .gl-icon,
    &[disabled] .gl-icon,
    &[disabled]:hover .gl-icon,
    &[disabled]:focus .gl-icon {
      @include gl-text-black-normal;
    }

    &:focus,
    &:hover {
      @include gl-bg-black;

      .gl-icon {
        color: var(--label-background-color);
      }
    }
  }
}

.gl-label-text-light {
  @include gl-text-white;

  #{$label-close-button} {
    .gl-icon,
    &[disabled] .gl-icon,
    &[disabled]:hover .gl-icon,
    &[disabled]:focus .gl-icon {
      @include gl-text-white;
    }

    &:focus,
    &:hover {
      @include gl-bg-white;

      .gl-icon {
        color: var(--label-background-color);
      }
    }
  }
}

.gl-label-scoped {
  &.gl-label-text-light {
    #{$label-close-button} .gl-icon,
    #{$label-close-button}[disabled]:hover .gl-icon {
      color: var(--label-background-color);
    }

    #{$label-close-button}:not(:disabled) {
      &:focus,
      &:hover {
        background-color: var(--label-background-color);
      }
    }
  }

  &.gl-label-text-dark {
    #{$label-close-button}:not(:disabled) {
      &:focus,
      &:hover {
        @include gl-bg-black;
      }
    }
  }

  #{$label-close-button} {
    &:focus,
    &:hover {
      .gl-icon {
        @include gl-text-white;
      }
    }
  }

  .gl-label-text {
    @include gl-pr-2;
    background-color: var(--label-background-color);
  }

  .gl-label-text-scoped {
    @include gl-text-gray-950;
    @include gl-pl-2;
    @include gl-pr-3;
  }
}

.gl-label-sm {
  .gl-label-text,
  .gl-label-text-scoped {
    @include gl-py-0;
  }

  #{$label-close-button} {
    @include gl-mr-1;
  }
}

.gl-label-tooltip-title {
  @include gl-display-block;
  @include gl-text-theme-indigo-300;
  @include gl-font-weight-bold;
}