/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./app/components/ui/styles.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
.button--icon {
  gap: 0px;
}

.button--icon::after {
  margin-inline-start: 0.5rem;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  line-height: 1;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  content: var(--tw-content);
  animation-duration: 300ms;
}

.button--arrow:hover::after {
  content: var(--tw-content);
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button--arrow {

  &:where([dir="ltr"], [dir="ltr"] *):hover::after {
    --tw-rotate: 45deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  &:where([dir="rtl"], [dir="rtl"] *)::after {
    --tw-scale-x: -1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  &:where([dir="rtl"], [dir="rtl"] *):hover::after {
    --tw-rotate: -45deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  &::after {
    --arrow-up-right-icon: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 13L13 3" stroke="%23F7F7F7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M13 13V3H3" stroke="%23F7F7F7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    mask-image: var(--arrow-up-right-icon);
  }
}