@use './hairline.scss' as *;

:root {
  --xzx-padding-base: 4px;
  --xzx-padding-xs: 8px;
  --xzx-padding-sm: 12px;
  --xzx-padding-md: 16px;
  --xzx-padding-lg: 24px;
  --xzx-padding-xl: 32px;

  --xzx-border-width: 1px;

  --xzx-font-bold: 600;

  --xzx-white: var(--xzx-color-white);
  --xzx-background-2: var(--xzx-color-white);
  --xzx-text-color: var(--xzx-text-gray-1);
  --xzx-text-color-2: var(--xzx-text-gray-2);
  --xzx-text-color-3: var(--xzx-text-gray-3);
  --xzx-text-color-4: var(--xzx-text-gray-4);

  --xzx-active-color: var(--xzx-gray-1);

  --xzx-active-opacity: 0.6;
  --xzx-disabled-opacity: 0.5;
  --xzx-duration-base: 0.3s;
  --xzx-duration-fast: 0.2s;
  --xzx-ease-out: ease-out;
  --xzx-ease-in: ease-in;
}

.xzx-safe-area-top {
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}

.xzx-safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom);
  padding-bottom: constant(safe-area-inset-bottom);
}


[class*='xzx-hairline'] {
  &::after {
    @include hairline-common();
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    border: 0 solid var(--xzx-gray-4);
    transform: scale(0.5);
  }
}


.xzx-hairline {
  &,
  &--top,
  &--left,
  &--right,
  &--bottom,
  &--surround,
  &--top-bottom {
    position: relative;
  }

  &--lighter::after {
    border: 0 solid var(--xzx-gray-3);
  }

  &--top::after {
    border-top-width: var(--xzx-border-width);
  }

  &--left::after {
    border-left-width: var(--xzx-border-width);
  }

  &--right::after {
    border-right-width: var(--xzx-border-width);
  }

  &--bottom::after {
    border-bottom-width: var(--xzx-border-width);
  }

  &,
  &-unset {
    &--top-bottom::after {
      border-width: var(--xzx-border-width) 0;
    }
  }

  &--surround::after {
    border-width: var(--xzx-border-width);
  }
}

.xzx-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.xzx-haptics-feedback {
  cursor: pointer;

  &:active {
    opacity: var(--xzx-active-opacity);
  }
}

@keyframes xzx-slide-up-enter {
  from {
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes xzx-slide-up-leave {
  to {
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes xzx-slide-down-enter {
  from {
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes xzx-slide-down-leave {
  to {
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes xzx-slide-left-enter {
  from {
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes xzx-slide-left-leave {
  to {
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes xzx-slide-right-enter {
  from {
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes xzx-slide-right-leave {
  to {
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes xzx-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes xzx-fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes xzx-rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.xzx-fade {
  &-enter-active {
    animation: var(--xzx-duration-base) xzx-fade-in both var(--xzx-ease-out);
  }

  &-leave-active {
    animation: var(--xzx-duration-base) xzx-fade-out both var(--xzx-ease-in);
  }
}

.xzx-slide-up {
  &-enter-active {
    animation: xzx-slide-up-enter var(--xzx-duration-base) both var(--xzx-ease-out);
  }

  &-leave-active {
    animation: xzx-slide-up-leave var(--xzx-duration-base) both var(--xzx-ease-in);
  }
}

.xzx-slide-down {
  &-enter-active {
    animation: xzx-slide-down-enter var(--xzx-duration-base) both var(--xzx-ease-out);
  }

  &-leave-active {
    animation: xzx-slide-down-leave var(--xzx-duration-base) both var(--xzx-ease-in);
  }
}

.xzx-slide-left {
  &-enter-active {
    animation: xzx-slide-left-enter var(--xzx-duration-base) both var(--xzx-ease-out);
  }

  &-leave-active {
    animation: xzx-slide-left-leave var(--xzx-duration-base) both var(--xzx-ease-in);
  }
}

.xzx-slide-right {
  &-enter-active {
    animation: xzx-slide-right-enter var(--xzx-duration-base) both var(--xzx-ease-out);
  }

  &-leave-active {
    animation: xzx-slide-right-leave var(--xzx-duration-base) both var(--xzx-ease-in);
  }
}