@use "@/styles/mixin/blur-glass.scss" as blur-glass;

.touchable {
  background-color: var(--q-c-white);
  color: var(--q-c-dark);
  border-radius: var(--q-button-radius);
  font-weight: var(--q-button-font-weight);
  letter-spacing: var(--q-button-letter-spacing);
  transition: all 0.2s ease;

  // Pressed state overlay
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    border-radius: inherit;
    pointer-events: none;
    transition: background 0.1s ease-out;
  }
  &:active::before,
  &.shortcut-active::before {
    background: rgba(0, 0, 0, 0.05);
  }
  // Filled buttons use light overlay
  &.primary:active::before,
  &.primary.shortcut-active::before,
  &.highlight:active::before,
  &.highlight.shortcut-active::before,
  &.danger:active::before,
  &.danger.shortcut-active::before,
  &.stripe:active::before,
  &.stripe.shortcut-active::before {
    background: rgba(255, 255, 255, 0.15);
  }

  &.border-radius-sm {
    border-radius: 0.375rem;
  }
  &.border-radius-xs {
    border-radius: 0.25rem;
  }
  &.border-radius-xxs {
    border-radius: 0.125rem;
  }
  &.border-radius-none {
    border-radius: 0rem;
  }

  &.squircle {
    corner-shape: squircle;
    border-radius: 12px;
    /* --squircle-radius: 8px; */
    &.border-radius-sm {
      /* --squircle-radius: 6px; */
      border-radius: 10px;
    }
    &.border-radius-xs {
      /* --squircle-radius: 4px; */
      border-radius: 8px;
    }
    &.border-radius-xxs {
      /* --squircle-radius: 2px; */
      border-radius: 4px;
    }
    &.border-radius-none {
      /* --squircle-radius: 0px; */
      border-radius: 0px;
    }
  }

  &.primary {
    --q-progress-color: rgba(255, 255, 255, 0.1);
    --q-progress-color-light: rgba(255, 255, 255, 0.05);
    background-color: var(--q-button-primary-bg);
    color: var(--q-button-primary-text);
    border: 0.5px solid var(--q-button-primary-border);
    box-shadow: var(--q-button-primary-shadow);

    &.squircle {
      /* mask-image: paint(squircle); */
    }

    &:hover {
      box-shadow: var(--q-button-primary-hover-shadow);
    }
    &[disabled] {
      box-shadow: none;
      background-color: #6a6a7f;
      border-color: #6a6a7f;
    }
  }

  &.danger {
    --q-progress-color: rgba(255, 255, 255, 0.15);
    --q-progress-color-light: rgba(255, 255, 255, 0.05);
    background-color: var(--q-button-danger-bg);
    color: var(--q-c-white);
    border: 0.5px solid var(--q-button-danger-border);

    &.squircle {
      /* mask-image: paint(squircle); */
    }

    &:hover {
      background-color: var(--q-button-danger-hover-bg);
      border: 0.5px solid var(--q-button-danger-hover-bg);
    }
    &[disabled] {
      box-shadow: none;
      opacity: 0.5;
    }
  }

  &.highlight {
    --q-progress-color: rgba(255, 255, 255, 0.15);
    --q-progress-color-light: rgba(255, 255, 255, 0.05);
    background-color: var(--q-button-highlight-bg);
    color: var(--q-c-white);
    border: 0.5px solid var(--q-button-highlight-border);

    &.squircle {
      /* mask-image: paint(squircle); */
    }

    &:hover {
      background-color: var(--q-button-highlight-hover-bg);
      border: 0.5px solid var(--q-button-highlight-hover-bg);
    }
    &[disabled] {
      box-shadow: none;
      opacity: 0.5;
    }
  }

  &.outlined {
    --q-progress-color: rgba(0, 0, 0, 0);
    --q-progress-color-light: rgba(0, 0, 0, 0.03);
    background-color: var(--q-button-outlined-bg);
    border: var(--q-button-outlined-border-width) solid var(--q-button-outlined-border);
    box-shadow: var(--q-button-outlined-shadow);
    color: var(--q-button-outlined-text);
    backdrop-filter: var(--q-button-outlined-backdrop-filter);
    -webkit-backdrop-filter: var(--q-button-outlined-webkit-backdrop-filter);

    &.squircle {
      /* border: none;
      background: paint(squircle);
      --squircle-outline: 0.5px;
      --squircle-fill: var(--q-c-dark-4); */
    }

    &:hover {
      background-color: var(--q-button-outlined-hover-bg);
      border-color: var(--q-button-outlined-hover-border);
      box-shadow: var(--q-button-outlined-hover-shadow);
    }
    &[disabled] {
      color: #888;
      &:hover {
        background-color: transparent;
        box-shadow:
          inset 0px 1px 10px 0px #0000000d,
          0px 1px 3px 0px #4343431a !important;
      }
    }
    &.toggle-on {
      // pushed state
      background-color: rgba(0, 0, 0, 0.04);
      box-shadow: inset 0px 1px 2px #4343431a;
    }
  }

  &.outlined.danger {
    --q-progress-color: rgba(0, 0, 0, 0);
    --q-progress-color-light: rgba(255, 0, 0, 0.03);
    color: #d32f2f;
    // box-shadow: inset 0 0 0 1px rgba(244,67,54,0.2);
    border: 0.5px solid rgba(244, 67, 54, 0.2);
    box-shadow:
      inset 0px 1px 10px 0px rgba(244, 67, 54, 0.01),
      0px 1px 1px 0px rgba(244, 67, 54, 0.1);

    &.squircle {
      /* mask-image: none !important;
      border: none;
      background: paint(squircle);
      --squircle-outline: 0.5px;
      --squircle-fill: rgba(244, 67, 54, 0.2); */
    }

    &:hover {
      background-color: rgba(244, 67, 54, 0.04);
    }
    &[disabled] {
      opacity: 0.5;
      &:hover {
        background-color: transparent;
      }
    }
  }

  &.plain {
    @include blur-glass.blur-glass;
    --q-progress-color: rgba(0, 0, 0, 0);
    --q-progress-color-light: rgba(0, 0, 0, 0.03);
    box-shadow: none;
    border: none;
    background-color: transparent;
    color: var(--q-button-plain-text);

    &.squircle {
      /* mask-image: paint(squircle); */
    }

    &:hover {
      background-color: var(--q-button-plain-hover-bg);
      color: var(--q-button-plain-hover-text);
    }
    &[disabled] {
      opacity: 0.5;
      &:hover {
        background-color: transparent;
      }
    }
  }

  &.plain.danger {
    --q-progress-color: rgba(0, 0, 0, 0);
    --q-progress-color-light: rgba(255, 0, 0, 0.03);
    color: #d32f2f;
    background-color: transparent;
    border: none;

    &.squircle {
      /* mask-image: paint(squircle); */
    }

    &:hover {
      background-color: rgba(244, 67, 54, 0.04);
    }
    &[disabled] {
      opacity: 0.5;
      &:hover {
        background-color: transparent;
      }
    }
  }

  &.stripe {
    --q-progress-color: rgba(0, 0, 0, 0);
    --q-progress-color-light: rgba(0, 0, 0, 0.03);
    box-shadow: none;
    border: none;
    background: transparent url("@/assets/images/button-stripe-bg.webp") repeat
      0 0;

    &.squircle {
      /* mask-image: paint(squircle); */
    }

    &:hover {
      background-color: rgba(0, 0, 0, 0.05);
    }
    &[disabled] {
      opacity: 0.5;
      &:hover {
        background-color: rgba(255, 255, 255, 0.1);
      }
    }
  }

  &.placeholder {
    @include blur-glass.blur-glass;
    --q-progress-color: rgba(0, 0, 0, 0);
    --q-progress-color-light: rgba(0, 0, 0, 0.03);
    background-color: transparent;
    border: 1px dashed var(--q-c-dark-4);
    box-shadow:
      inset 0px 1px 10px 0px rgba(0, 0, 0, 0.01),
      0px 1px 2px 0px #4343431a;

    &.squircle {
      /* border: none;
      background: paint(squircle);
      --squircle-outline: 0.5px;
      --squircle-fill: var(--q-c-dark-4); */
    }

    &:hover {
      background-color: rgba(0, 0, 0, 0.02);
      box-shadow:
        inset 0px 1px 2px 0px rgba(0, 0, 0, 0.01),
        0px 1px 1px 0px #4343431a;
    }
    &[disabled] {
      color: #888;
      &:hover {
        background-color: transparent;
        box-shadow:
          inset 0px 1px 10px 0px #0000000d,
          0px 1px 3px 0px #4343431a !important;
      }
    }
    &.toggle-on {
      // pushed state
      background-color: rgba(0, 0, 0, 0.04);
      box-shadow: inset 0px 1px 2px #4343431a;
    }
  }
}
.touchable.loading {
  .ocean {
    height: 100%; /* change the height of the waves here */
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
  }
  .wave {
    animation: progress 1s linear infinite;
    background: repeating-linear-gradient(
      45deg,
      var(--q-progress-color),
      var(--q-progress-color) 10px,
      var(--q-progress-color-light) 10px,
      var(--q-progress-color-light) 20px
    );
    position: absolute;
    left: -28px;
    right: 0;
    top: 0;
    bottom: 0;
  }
  &.primary {
    color: #9d9db8;
  }
  &.stripe {
    background-size: 220%;
  }
  &.danger {
    color: #ffcaca;
  }
  &.highlight {
    color: #b3d4fc;
  }
  &.outlined,
  &.plain {
    color: #888;
  }
  &.outlined.danger,
  &.plain.danger {
    color: #e67b7b;
  }
}
@keyframes progress {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(28px);
  }
}
.dark {
  .touchable {
    background-color: var(--q-c-dark);
    color: var(--q-c-white);

    // Dark mode pressed state
    &:active::before,
    &.shortcut-active::before {
      background: rgba(0, 0, 0, 0.15);
    }
    &.primary:active::before,
    &.primary.shortcut-active::before,
    &.highlight:active::before,
    &.highlight.shortcut-active::before,
    &.danger:active::before,
    &.danger.shortcut-active::before,
    &.stripe:active::before,
    &.stripe.shortcut-active::before {
      background: rgba(0, 0, 0, 0.2);
    }

    &.primary {
      --q-progress-color: rgba(255, 255, 255, 0.1);
      --q-progress-color-light: rgba(0, 0, 0, 0.05);
      background-color: var(--q-c-light);
      border: 0.5px solid var(--q-c-light);
      color: var(--q-c-dark);
      &:hover {
        box-shadow: inset 0 0 16px var(--q-c-dark-4);
      }
      &[disabled] {
        box-shadow: none;
        background-color: #a2a2a3;
        border-color: #a2a2a3;
      }
    }

    &.danger {
      background-color: var(--q-c-red);
      color: var(--q-c-white);
      border: 0.5px solid var(--q-c-red);
      &:hover {
        background-color: var(--q-c-red-light);
      }
      &[disabled] {
        opacity: 0.7;
        &:hover {
          background-color: var(--q-c-red);
        }
      }
    }

    &.highlight {
      background-color: var(--q-c-blue);
      color: var(--q-c-white);
      border: 0.5px solid var(--q-c-blue);
      &:hover {
        background-color: var(--q-c-blue-light);
      }
      &[disabled] {
        opacity: 0.7;
        &:hover {
          background-color: var(--q-c-blue);
        }
      }
    }

    &.outlined {
      --q-progress-color-light: rgba(255, 255, 255, 0.08);
      border: 0.5px solid rgba(255, 255, 255, 0.12);
      background-color: rgba(255, 255, 255, 0.03);
      box-shadow:
        inset 0px 1px 0px 0px rgba(255, 255, 255, 0.04),
        0px 1px 2px 0px rgba(0, 0, 0, 0.2);
      &:hover {
        color: var(--q-c-light);
        background-color: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.18);
        box-shadow:
          inset 0px 1px 0px 0px rgba(255, 255, 255, 0.06),
          0px 2px 4px 0px rgba(0, 0, 0, 0.25);
      }
      &[disabled] {
        color: #666;
        background-color: transparent;
        border-color: rgba(255, 255, 255, 0.08);
        box-shadow: none;
        &:hover {
          background-color: transparent;
          box-shadow: none;
        }
      }
      &.toggle-on {
        // pushed state
        background-color: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.15);
        box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
      }
    }

    &.outlined.danger {
      --q-progress-color-light: rgba(255, 0, 0, 0.2);
      color: var(--q-c-red-light);
      border: 0.5px solid var(--q-c-red);
      background: transparent;
      &:hover {
        background-color: var(--q-c-red-dimm-2);
      }
      &[disabled] {
        &:hover {
          background-color: transparent;
        }
      }
    }

    &.plain {
      --q-progress-color-light: rgba(255, 255, 255, 0.1);
      box-shadow: none;
      border: none;
      background-color: transparent;
      &:hover {
        background-color: rgba(255, 255, 255, 0.1);
      }
    }
    &.plain.danger {
      --q-progress-color-light: rgba(255, 0, 0, 0.2);
      color: var(--q-c-red-light);
      background-color: transparent;
      border: none;
      &:hover {
        background-color: var(--q-c-red-dimm-2);
      }
      &[disabled] {
        opacity: 0.5;
        &:hover {
          background-color: transparent;
        }
      }
    }
    &.stripe {
      --q-progress-color-light: rgba(255, 255, 255, 0.03);
      &:hover {
        background-color: rgba(255, 255, 255, 0.1);
      }
    }
    &.placeholder {
      border-color: rgba(255, 255, 255, 0.15);
      background-color: transparent;
      box-shadow: none;
      &:hover {
        color: var(--q-c-light);
        background-color: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.2);
      }
    }
  }
}