@use '../../style/variables' as *;

.#{$prefix}-quick-actions {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  &__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ty-quick-actions-fab-size);
    height: var(--ty-quick-actions-fab-size);
    border: none;
    border-radius: 999px;
    background:
      radial-gradient(
        circle at 30% 20%,
        color-mix(in srgb, #fff 18%, transparent),
        transparent 48%
      ),
      var(--ty-quick-actions-bg);
    color: var(--ty-quick-actions-color);
    font-size: var(--ty-quick-actions-fab-font-size);
    box-shadow: var(--ty-shadow-card);
    cursor: pointer;
    transition:
      transform var(--ty-quick-actions-button-transition-duration) ease,
      background-color var(--ty-quick-actions-button-transition-duration) ease,
      box-shadow var(--ty-quick-actions-button-transition-duration) ease;
    outline: none;

    &:hover:not(.#{$prefix}-quick-actions__button_disabled) {
      background-color: var(--ty-quick-actions-bg-hover);
      transform: translateY(-1px);
    }

    &:focus-visible {
      box-shadow: var(--ty-quick-actions-focus-ring), var(--ty-shadow-card);
    }

    &_open {
      transform: translateY(-1px) scale(1.03);

      .#{$prefix}-quick-actions__icon-default {
        transform: rotate(45deg);
      }
    }

    &_disabled {
      opacity: var(--ty-quick-actions-disabled-opacity);
      cursor: not-allowed;
      transform: none;
    }
  }

  &__icon-default {
    position: relative;
    display: inline-block;
    width: 1em;
    height: 1em;
    transition: transform var(--ty-quick-actions-icon-transition-duration) ease;

    &::before,
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      background-color: currentcolor;
      border-radius: 999px;
      translate: -50% -50%;
    }

    &::before {
      width: 58%;
      height: 2px;
    }

    &::after {
      width: 2px;
      height: 58%;
    }
  }

  &__actions {
    position: absolute;
    z-index: 1;
    display: flex;
    gap: 10px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity var(--ty-quick-actions-actions-transition-duration) ease,
      visibility var(--ty-quick-actions-actions-transition-duration) ease,
      transform var(--ty-quick-actions-actions-transition-duration) ease;

    &_open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
  }

  &_up &__actions,
  &_down &__actions {
    flex-direction: column;
    align-items: flex-end;
    min-width: max-content;
  }

  &_left &__actions,
  &_right &__actions {
    flex-direction: row;
    align-items: stretch;
  }

  &_up &__actions {
    right: 0;
    bottom: calc(100% + var(--ty-quick-actions-actions-gap));
    transform: translateY(10px) scale(var(--ty-quick-actions-actions-scale-closed));
    transform-origin: bottom right;
  }

  &_up &__actions_open {
    transform: translateY(0) scale(var(--ty-quick-actions-actions-scale-open));
  }

  &_down &__actions {
    right: 0;
    top: calc(100% + var(--ty-quick-actions-actions-gap));
    transform: translateY(-10px) scale(var(--ty-quick-actions-actions-scale-closed));
    transform-origin: top right;
  }

  &_down &__actions_open {
    transform: translateY(0) scale(var(--ty-quick-actions-actions-scale-open));
  }

  &_left &__actions {
    right: calc(100% + var(--ty-quick-actions-actions-gap));
    top: 50%;
    transform: translate(10px, -50%) scale(var(--ty-quick-actions-actions-scale-closed));
    transform-origin: center right;
  }

  &_left &__actions_open {
    transform: translate(0, -50%) scale(var(--ty-quick-actions-actions-scale-open));
  }

  &_right &__actions {
    left: calc(100% + var(--ty-quick-actions-actions-gap));
    top: 50%;
    transform: translate(-10px, -50%) scale(var(--ty-quick-actions-actions-scale-closed));
    transform-origin: center left;
  }

  &_right &__actions_open {
    transform: translate(0, -50%) scale(var(--ty-quick-actions-actions-scale-open));
  }

  &__action-wrapper {
    display: flex;
    min-width: 0;
  }

  &__action {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: min(260px, 60vw);
    min-height: var(--ty-quick-actions-action-size);
    padding: 10px 14px;
    border: none;
    border-radius: 999px;
    background-color: var(--ty-quick-actions-action-bg, var(--ty-color-bg-container));
    color: var(--ty-quick-actions-action-color, var(--ty-color-text));
    box-shadow: var(--ty-shadow-sm);
    cursor: pointer;
    text-align: left;
    transition:
      transform var(--ty-quick-actions-button-transition-duration) ease,
      background-color var(--ty-quick-actions-button-transition-duration) ease,
      box-shadow var(--ty-quick-actions-button-transition-duration) ease,
      color var(--ty-quick-actions-button-transition-duration) ease;
    outline: none;

    &:hover:not(.#{$prefix}-quick-actions__action_disabled) {
      background-color: var(
        --ty-quick-actions-action-bg-hover,
        color-mix(in srgb, var(--ty-color-primary) 8%, var(--ty-color-bg-container))
      );
      box-shadow: var(--ty-shadow-card);
      transform: translateY(-1px);
    }

    &:focus-visible {
      box-shadow: var(--ty-quick-actions-focus-ring), var(--ty-shadow-sm);
    }

    &_danger {
      color: var(--ty-color-danger);
      background-color: color-mix(
        in srgb,
        var(--ty-color-danger) 10%,
        var(--ty-quick-actions-action-bg, var(--ty-color-bg-container))
      );

      &:hover:not(.#{$prefix}-quick-actions__action_disabled) {
        background-color: color-mix(
          in srgb,
          var(--ty-color-danger) 16%,
          var(--ty-quick-actions-action-bg, var(--ty-color-bg-container))
        );
      }
    }

    &_disabled {
      opacity: var(--ty-quick-actions-disabled-opacity);
      cursor: not-allowed;
      transform: none;
    }
  }

  &__action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: color-mix(in srgb, currentcolor 10%, transparent);
    font-size: var(--ty-quick-actions-action-font-size);
  }

  &__action-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  &__action-label {
    color: inherit;
    font-size: var(--ty-font-size-base);
    font-weight: 600;
    line-height: 1.2;
  }

  &__action-description {
    color: var(--ty-color-text-secondary);
    font-size: var(--ty-font-size-sm);
    line-height: 1.3;
  }

  &__action-loader {
    width: 14px;
    height: 14px;
    border: 2px solid color-mix(in srgb, currentcolor 24%, transparent);
    border-top-color: currentcolor;
    border-radius: 50%;
    animation: #{$prefix}-quick-actions-spin 0.7s linear infinite;
  }
}

@keyframes #{$prefix}-quick-actions-spin {
  from {
    transform: rotate(0deg);
  }

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