@layer kz-components {
  .clearButton {
    /* Button reset */
    appearance: none;
    background: transparent;
    color: inherit;
    font: inherit;
    margin: 0;
    padding: 0;
    border: none;
    position: relative;
    display: inline-flex;
    border-radius: 100%;

    &:hover {
      cursor: pointer;
    }

    &:focus-visible {
      outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
        var(--color-blue-500);
      outline-offset: -1px;
    }
  }

  .default {
    color: var(--color-gray-500);

    &:hover,
    &:focus-visible {
      color: var(--color-purple-800);
    }
  }

  .reversed {
    color: rgb(var(--color-white-rgb), 0.8);

    &:hover,
    &:focus-visible {
      color: var(--color-white);
    }

    &:focus-visible {
      outline-color: var(--color-blue-300);
    }
  }
}