// Copyright 2020 Energinet DataHub A/S
//
// Licensed under the Apache License, Version 2.0 (the "License2");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
@use "@energinet-datahub/watt/utils" as watt;

label {
  @include watt.typography-watt-text-s;
  position: relative;
  background: var(--input-background, var(--watt-color-neutral-white));
  border-radius: var(--watt-space-m);
  border: 1px solid var(--input-border-color, var(--watt-on-light-low-emphasis));
  color: var(--watt-on-light-high-emphasis);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 5px 12px; // Magic UX numbers
  user-select: none;
  white-space: nowrap;
  max-width: 100%;

  &:hover {
    border: 1px solid var(--watt-on-light-medium-emphasis);
  }

  &:active:not(.disabled),
  &:focus-within {
    background: var(--watt-color-primary-ultralight);
    border: 1px solid var(--watt-on-light-medium-emphasis);
    outline: none;
  }

  &.selected {
    background: var(--watt-color-primary);
    color: var(--watt-on-dark-high-emphasis);
    border-color: transparent;

    &:hover,
    &:focus-within {
      background: var(--watt-color-primary-dark);
      border-color: transparent;
    }
  }

  &.disabled {
    border: 1px solid var(--watt-on-light-surface-overlay);
    color: var(--watt-on-light-low-emphasis);
    cursor: not-allowed;
  }

  &.read-only {
    cursor: inherit;
  }

  .selected-icon {
    margin-right: var(--watt-space-s);
  }
}
