/**
 * @license EUPL-1.2
 * Copyright (c) 2021 Gemeente Utrecht
 */

@import "~@utrecht/focus-ring-css/src/mixin";

.utrecht-mapcontrolbutton {
  --utrecht-icon-size: var(--utrecht-mapcontrolbutton-min-block-size);
  --utrecht-icon-color: var(--utrecht-mapcontrolbutton-color);

  align-items: center;
  background-color: var(--utrecht-mapcontrolbutton-background-color);
  border-color: var(--utrecht-mapcontrolbutton-border-color);
  border-radius: var(--utrecht-mapcontrolbutton-border-radius);
  border-style: var(--utrecht-mapcontrolbutton-border-style);
  border-width: var(--utrecht-mapcontrolbutton-border-width);
  color: var(--utrecht-mapcontrolbutton-color);
  display: flex;
  flex-direction: row;
  justify-content: center;
  min-block-size: var(--utrecht-mapcontrolbutton-min-block-size);
  min-inline-size: var(--utrecht-mapcontrolbutton-min-inline-size);
  padding-block-end: 0;
  padding-block-start: 0;
  padding-inline-end: 0;
  padding-inline-start: 0;
}

.utrecht-mapcontrolbutton:disabled,
.utrecht-mapcontrolbutton--disabled {
  --utrecht-icon-color: var(--utrecht-mapcontrolbutton-disabled-color, var(--utrecht-mapcontrolbutton-color));

  background-color: var(--utrecht-mapcontrolbutton-disabled-background-color);
  border-color: var(--utrecht-mapcontrolbutton-disabled-border-color);
  color: var(--utrecht-mapcontrolbutton-disabled-color);
}

.utrecht-mapcontrolbutton--focus-visible {
  @include utrecht-focus-visible;
}

.utrecht-mapcontrolbutton--focus {
  @include utrecht-focus;

  --utrecht-icon-color: var(--utrecht-mapcontrolbutton-focus-color, var(--utrecht-mapcontrolbutton-color));
}

.utrecht-mapcontrolbutton:focus:not(:disabled, [aria-disabled="true"], .utrecht-mapcontrolbutton--disabled) {
  @extend .utrecht-mapcontrolbutton--focus;
}

/* override the `:focus` selector above */
/* stylelint-disable-next-line no-descending-specificity */
.utrecht-mapcontrolbutton:focus-visible {
  @extend .utrecht-mapcontrolbutton--focus-visible;
}

.utrecht-mapcontrolbutton--hover:not(:disabled),
.utrecht-mapcontrolbutton:hover:not(:disabled, .utrecht-mapcontrolbutton--disabled) {
  background-color: var(--utrecht-mapcontrolbutton-hover-background-color);
  color: var(--utrecht-mapcontrolbutton-color);
}

.utrecht-mapcontrolbutton__label {
  display: block;
  padding-inline-end: var(--utrecht-mapcontrolbutton-label-margin-inline-end);
  padding-inline-start: var(--utrecht-mapcontrolbutton-label-margin-inline-start);
}