@charset "UTF-8";

/* ===============================================
  * Animation *
=============================================== */
[data-animation-type] {
  --animation-hover: 150ms ease-in;
}

@media screen and (min-width: 768px) and (hover: none) {
  [data-animation-type="text-underline"] {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  [data-animation-type="text-underline"]:active {
    text-decoration: underline !important;
  }
}
@media screen and (min-width: 768px) and (-ms-high-contrast: none),
  screen and (min-width: 768px) and (-ms-high-contrast: active),
  screen and (min-width: 768px) and (-moz-touch-enabled: 0),
  screen and (min-width: 768px) and (hover: hover) {
  [data-animation-type="text-underline"]:hover {
    text-decoration: underline !important;
  }
}

[data-animation-type="opacity"] {
  transition: opacity var(--animation-hover);
}

@media (hover: none) {
  [data-animation-type="opacity"] {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  [data-animation-type="opacity"]:active {
    opacity: var(--hover-opacity);
  }
}
@media (-ms-high-contrast: none),
  (-ms-high-contrast: active),
  (-moz-touch-enabled: 0),
  (hover: hover) {
  [data-animation-type="opacity"]:hover {
    opacity: var(--hover-opacity);
  }
}

[data-animation-type="image-circle"] {
  display: grid;
  place-content: center;
  border-radius: 4px;
  transition: border-radius var(--animation-hover),
    background var(--animation-hover);
}

@media (hover: none) {
  [data-animation-type="image-circle"] {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  [data-animation-type="image-circle"]:active {
    background-color: var(--color-gray-500);
    border-radius: 50%;
  }
}
@media (-ms-high-contrast: none),
  (-ms-high-contrast: active),
  (-moz-touch-enabled: 0),
  (hover: hover) {
  [data-animation-type="image-circle"]:hover {
    background-color: var(--color-gray-500);
    border-radius: 50%;
  }
}
[data-animation-type="image-circle"] > * {
  transition: scale var(--animation-hover);
}
@media (hover: none) {
  [data-animation-type="image-circle"] {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  [data-animation-type="image-circle"]:active > * {
    scale: 0.8;
  }
}
@media (-ms-high-contrast: none),
  (-ms-high-contrast: active),
  (-moz-touch-enabled: 0),
  (hover: hover) {
  [data-animation-type="image-circle"]:hover > * {
    scale: 0.8;
  }
}