/* ==================================================
   ATOM: BUTTON ICON
================================================== */

.button-icon {
  --button-icon-bg: #000;
  --button-icon-fg: var(--white);

  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--button-icon-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.button-icon:hover,
.button-icon:focus {
  --button-icon-bg: var(--primary);
  --button-icon-fg: var(--white);
  transform: translateY(-1px);
}

.button-icon__glyph,
.button-icon__glyph svg {
  display: block;
  width: 100%;
  height: 100%;
}

.button-icon__glyph svg circle {
  fill: var(--button-icon-bg) !important;
}

.button-icon__glyph svg .cls-1,
.button-icon__glyph svg path,
.button-icon__glyph svg polygon,
.button-icon__glyph svg rect {
  fill: var(--button-icon-fg) !important;
}

@media (min-width: 1025px) {
  .button-icon {
    width: 56px;
    height: 56px;
  }
}