/*
Copyright 2023 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.icon-button {
  --cpd-icon-button-indicator-border-size: calc(
    var(--cpd-icon-button-size) * 0.0625
  );

  inline-size: var(--cpd-icon-button-size);
  block-size: var(--cpd-icon-button-size);

  /* the icon is 0.75 the size of the button, so add padding to put it in the middle */
  padding: calc(var(--cpd-icon-button-size) * 0.125);
  aspect-ratio: 1 / 1;
  border: 0;
  appearance: none;
  cursor: pointer;
  border-radius: 50%;
  position: relative;
  background: transparent;
  line-height: 0px;
}

.icon-button[data-kind="primary"] {
  * {
    color: var(--cpd-color-icon-secondary);
  }
}

.icon-button[data-kind="secondary"] {
  background: var(--cpd-color-bg-subtle-secondary);

  * {
    color: var(--cpd-color-icon-secondary);
  }
}

.no-background[data-kind="secondary"] {
  background: transparent;
}

.icon-button[aria-disabled="true"] {
  cursor: not-allowed;

  * {
    color: var(--cpd-color-icon-disabled);
  }
}

/**
 * Hover state
 */

@media (hover) {
  .icon-button:not([aria-disabled="true"]):hover {
    background: var(--cpd-color-bg-subtle-primary);

    * {
      color: var(--cpd-color-icon-primary);
    }
  }
}

.icon-button:not([aria-disabled="true"]):active {
  background: var(--cpd-color-bg-subtle-primary);

  * {
    color: var(--cpd-color-icon-primary);
  }
}

@media (hover) {
  .icon-button:not([aria-disabled="true"])[data-indicator]:is(:hover)::before {
    /* Same colour as the background */
    border: var(--cpd-icon-button-indicator-border-size) solid
      var(--cpd-color-bg-subtle-primary);
    inset-block-start: 0;
    inset-inline-end: 0;
  }
}

.icon-button:not([aria-disabled="true"])[data-indicator]:is(:active)::before {
  /* Same colour as the background */
  border: var(--cpd-icon-button-indicator-border-size) solid
    var(--cpd-color-bg-subtle-primary);
  inset-block-start: 0;
  inset-inline-end: 0;
}

@media (hover) {
  .icon-button:not([aria-disabled="true"]).destructive:hover {
    background: var(--cpd-color-bg-critical-subtle-hovered);
    outline: 1px solid var(--cpd-color-border-critical-subtle);
  }
}

.icon-button:not([aria-disabled="true"]).destructive {
  * {
    color: var(--cpd-color-icon-critical-primary);
  }
}