// It is basically a button which accepts SVG icon for [::before] as mask.
%icon-button {
  width: 2.5em;
  height: 2.5em;
  padding: 0.5em;
  color: inherit;
  background: var(--#{$CSS_VAR_PFX}bg-color-dark);
  border: none;
  border-radius: var(--#{$CSS_VAR_PFX}border-radius);
  will-change: transform;
  transition: all var(--#{$CSS_VAR_PFX}simple-transition);

  // if does not have button styles, enable scale down effect for active state
  &:not(.button) {
    @media (prefers-reduced-motion: no-preference) {
      &:focus-visible,
      &:active {
        transform: scale(0.85) !important;
      }
    }
  }

  &:before {
    content: " ";
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
  }
}

.close-button {
  @extend %icon-button;

  &:before {
    mask: var(--#{$CSS_VAR_PFX}close-icon) no-repeat 50% 50%;
    -webkit-mask: var(--#{$CSS_VAR_PFX}close-icon) no-repeat 50% 50%;
  }
}

.search-button {
  @extend %icon-button;

  &:before {
    mask: var(--#{$CSS_VAR_PFX}search-icon) no-repeat 50% 50%;
    -webkit-mask: var(--#{$CSS_VAR_PFX}search-icon) no-repeat 50% 50%;
  }
}