@use "../../../scss/globals.scss";

@keyframes profile-crop-toolbar-in {
  0% {
    opacity: 0;
    transform: translate(-50%, 12px);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.profile-image-crop-modal {
  display: flex;
  flex-direction: column;
  gap: calc(globals.$spacing-unit * 3);

  &__stage {
    position: relative;
    align-self: center;
    display: flex;
    justify-content: center;
    width: 100%;
  }

  &__frame {
    position: relative;
    overflow: hidden;
    background-color: globals.$dark-background-color;
    background-image:
      linear-gradient(45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.05) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.05) 75%);
    background-position:
      0 0,
      0 10px,
      10px -10px,
      -10px 0;
    background-size: 20px 20px;
    border: solid 1px globals.$border-color;
    border-radius: 8px;
    padding: 0;
    box-shadow:
      0 12px 32px rgba(0, 0, 0, 0.45),
      inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    color: inherit;
    cursor: grab;
    font: inherit;
    touch-action: none;
    user-select: none;
    transition: border-color ease 0.2s;

    &:hover {
      border-color: rgba(255, 255, 255, 0.16);
    }

    &:focus-visible {
      outline: none;
      border-color: globals.$brand-teal;
      box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.45),
        0 0 0 3px rgba(globals.$brand-teal, 0.35),
        inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    }

    &:active {
      cursor: grabbing;
    }

    &--avatar {
      width: min(420px, 72vw);
      aspect-ratio: 1;
    }

    &--banner {
      width: min(720px, 80vw);
      aspect-ratio: 4;
    }
  }

  &__image {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;
    transform-origin: top left;
    will-change: transform;
    pointer-events: none;
  }

  &__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;

    &--visible {
      opacity: 1;
    }
  }

  &__grid-line {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.4);

    &--v1,
    &--v2 {
      top: 0;
      bottom: 0;
      width: 1px;
    }

    &--v1 {
      left: 33.333%;
    }

    &--v2 {
      left: 66.666%;
    }

    &--h1,
    &--h2 {
      left: 0;
      right: 0;
      height: 1px;
    }

    &--h1 {
      top: 33.333%;
    }

    &--h2 {
      top: 66.666%;
    }
  }

  &__toolbar {
    position: absolute;
    bottom: calc(globals.$spacing-unit * 2);
    left: 50%;
    transform: translate(-50%, 0);
    display: flex;
    align-items: center;
    gap: globals.$spacing-unit;
    max-width: calc(100% - globals.$spacing-unit * 4);
    padding: 6px calc(globals.$spacing-unit * 1.5);
    background-color: rgba(18, 18, 18, 0.66);
    backdrop-filter: blur(12px);
    border: solid 1px globals.$border-color;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    animation: profile-crop-toolbar-in 0.25s cubic-bezier(0.33, 1, 0.68, 1);
  }

  &__toolbar-divider {
    width: 1px;
    height: 20px;
    background-color: globals.$border-color;
    flex-shrink: 0;
  }

  &__icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background-color: transparent;
    color: globals.$muted-color;
    cursor: pointer;
    transition: all ease 0.2s;

    &:hover:not(:disabled) {
      background-color: rgba(255, 255, 255, 0.1);
    }

    &:active:not(:disabled) {
      opacity: globals.$active-opacity;
    }

    &:disabled {
      opacity: globals.$disabled-opacity;
      cursor: not-allowed;
    }

    &--active {
      background-color: rgba(globals.$brand-teal, 0.18);
      color: globals.$brand-teal;

      &:hover:not(:disabled) {
        background-color: rgba(globals.$brand-teal, 0.26);
      }
    }
  }

  &__slider {
    -webkit-appearance: none;
    appearance: none;
    width: clamp(120px, 22vw, 200px);
    height: 6px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.12);
    background-image: linear-gradient(
      90deg,
      globals.$muted-color,
      globals.$muted-color
    );
    background-repeat: no-repeat;
    background-size: var(--fill, 0%) 100%;
    cursor: pointer;
    outline: none;
    transition: background-color ease 0.2s;

    &:disabled {
      opacity: globals.$disabled-opacity;
      cursor: not-allowed;
    }

    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: solid 2px globals.$muted-color;
      background-color: globals.$background-color;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
      cursor: pointer;
      transition:
        transform ease 0.15s,
        box-shadow ease 0.15s;
    }

    &::-webkit-slider-thumb:hover {
      transform: scale(1.12);
    }

    &::-webkit-slider-thumb:active {
      transform: scale(0.95);
    }

    &::-moz-range-track {
      height: 6px;
      border-radius: 999px;
      background-color: transparent;
    }

    &::-moz-range-progress {
      height: 6px;
      border-radius: 999px;
      background-color: globals.$muted-color;
    }

    &::-moz-range-thumb {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: solid 2px globals.$muted-color;
      background-color: globals.$background-color;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
      cursor: pointer;
    }

    &:focus-visible::-webkit-slider-thumb {
      box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.45),
        0 0 0 4px rgba(globals.$brand-teal, 0.4);
    }

    &:focus-visible::-moz-range-thumb {
      box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.45),
        0 0 0 4px rgba(globals.$brand-teal, 0.4);
    }
  }

  &__zoom-percent {
    min-width: 42px;
    text-align: right;
    font-size: globals.$small-font-size;
    font-variant-numeric: tabular-nums;
    color: globals.$body-color;
    user-select: none;
  }

  &__actions {
    display: flex;
    justify-content: flex-end;
    gap: globals.$spacing-unit;
    padding-top: calc(globals.$spacing-unit * 2);
    border-top: solid 1px globals.$border-color;
  }
}
