@import url("../../utils/breakpoints-fRdcjGc.css");
@import url("../../utils/palette_v2-xqjh14X.css");

[data-controller~="back--sentry-feedback"] {
  --sentry-bottom: .5rem;
  --sentry-right: .5rem;
  --sentry-top: auto;
  --sentry-left: auto;
  --sentry-z-index: 100000;
  --sentry-font-family: 'Helvetica Neue', Arial, sans-serif;
  --sentry-font-size: 14px;
  --sentry-background: #ffffff;
  --sentry-background-hover: #f6f6f7;
  --sentry-foreground: #2b2233;
  --sentry-error: #df3338;
  --sentry-success: #268d75;
  --sentry-border: 2px solid rgba(41, 35, 47, 0.13);
  --sentry-border-radius: 12px;
  --sentry-box-shadow: 0px 4px 24px 0px rgba(43, 34, 51, 0.12);
  --sentry-input-background: inherit;
  --sentry-input-foreground: inherit;
  --sentry-input-border: var(--sentry-border);
  --sentry-input-outline-focus: rgba(108, 95, 199, 1);
  --sentry-form-border-radius: 20px;
  --sentry-form-content-border-radius: 6px;
  --sentry-submit-background: rgba(88, 74, 192, 1);
  --sentry-submit-background-hover: rgba(108, 95, 199, 1);
  --sentry-submit-border: rgba(108, 95, 199, 1);
  --sentry-submit-outline-focus: #29232f;
  --sentry-submit-foreground: #ffffff;
  --sentry-submit-foreground-hover: #ffffff;
  --sentry-cancel-background: transparent;
  --sentry-cancel-background-hover: var(--sentry-background-hover);
  --sentry-cancel-border: var(--sentry-border);
  --sentry-cancel-outline-focus: var(--sentry-input-outline-focus);
  --sentry-cancel-foreground: var(--sentry-foreground);
  --sentry-cancel-foreground-hover: var(--sentry-foreground);


  position: fixed;
  left: var(--sentry-left);
  right: var(--sentry-right);
  bottom: var(--sentry-bottom);
  top: var(--sentry-top);
  z-index: var(--sentry-z-index);
  font-family: var(--sentry-font-family);
  font-size: var(--sentry-font-size);

  > button {
    line-height: 25px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: var(--sentry-border-radius);
    cursor: pointer;
    font-weight: 600;
    padding: 6px;
    text-decoration: none;
    color: var(--sentry-foreground);
    background-color: var(--sentry-background);
    border: var(--sentry-border);
    box-shadow: var(--sentry-box-shadow);
    opacity: 1;
    transition: opacity 0.1s ease-in-out;

    &:hover {
      background-color: var(--sentry-background-hover);
    }
  }

  &.dev {
    margin-bottom: 2rem;

    > dialog.dialog .dialog__content {
      bottom: 2.5rem;
    }

    > div.notification {
      bottom: 2.5rem;
    }
  }

  > dialog.dialog {
    line-height: 25px;
    background-color: rgba(0, 0, 0, 0.05);
    border: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.2s ease-in-out;

    &:not([open]) {
      opacity: 0;
      pointer-events: none;
      visibility: hidden;

      .dialog__content {
        transform: translate(0, -16px) scale(0.98);
      }
    }

    .dialog__content {
      position: fixed;
      left: var(--sentry-left);
      right: var(--sentry-right);
      bottom: var(--sentry-bottom);
      top: var(--sentry-top);

      border: var(--sentry-border);
      border-radius: var(--sentry-form-border-radius);
      background-color: var(--sentry-background);
      color: var(--sentry-foreground);

      width: 320px;
      max-width: 100%;
      max-height: calc(100% - 2rem);
      display: flex;
      flex-direction: column;
      box-shadow: var(--sentry-box-shadow);
      transition: transform 0.2s ease-in-out;
      transform: translate(0, 0) scale(1);
    }

    .dialog__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 20px;
      font-weight: 600;
      padding: 24px 24px 0 24px;
      margin: 0;
      margin-bottom: 16px;
    }

    .brand-link {
      display: inline-flex;
    }

    .error {
      color: var(--sentry-error);
      margin-bottom: 16px;
    }

    .form {
      display: grid;
      overflow: auto;
      flex-direction: column;
      gap: 16px;
      padding: 0 24px 24px;
    }

    .form__error-container {
      color: var(--sentry-error);
    }

    .form__error-container--hidden {
      display: none;
    }

    .form__label {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin: 0;
    }

    .form__label__text {
      display: grid;
      gap: 4px;
      align-items: center;
      grid-auto-flow: column;
      grid-auto-columns: max-content;
    }

    .form__label__text--required {
      font-size: 0.85em;
    }

    .form__input {
      font-family: inherit;
      line-height: inherit;
      background-color: var(--sentry-input-background);
      box-sizing: border-box;
      border: var(--sentry-input-border);
      border-radius: var(--sentry-form-content-border-radius);
      color: var(--sentry-input-foreground);
      font-size: 14px;
      font-weight: 500;
      padding: 6px 12px;

      &:focus-visible {
        outline: 1px auto var(--sentry-input-outline-focus);
      }
    }

    .form__input--textarea {
      font-family: inherit;
      resize: vertical;
    }

    .btn-group {
      display: grid;
      gap: 8px;
      margin-top: 8px;
    }

    .btn {
      line-height: inherit;
      border: var(--sentry-cancel-border);
      border-radius: var(--sentry-form-content-border-radius);
      cursor: pointer;
      font-size: 14px;
      font-weight: 600;
      padding: 6px 16px;

      &[disabled] {
        opacity: 0.6;
        pointer-events: none;
      }
    }

    .btn--primary {
      background-color: var(--sentry-submit-background);
      border-color: var(--sentry-submit-border);
      color: var(--sentry-submit-foreground);

      &:hover {
        background-color: var(--sentry-submit-background-hover);
        color: var(--sentry-submit-foreground-hover);
      }

      &:focus-visible {
        outline: 1px auto var(--sentry-submit-outline-focus);
      }
    }

    .btn--default {
      background-color: var(--sentry-cancel-background);
      color: var(--sentry-cancel-foreground);
      font-weight: 500;

      &:hover {
        background-color: var(--sentry-cancel-background-hover);
        color: var(--sentry-cancel-foreground-hover);
      }

      &:focus-visible {
        outline: 1px auto var(--sentry-cancel-outline-focus);
      }
    }

    .success-message {
      background-color: var(--sentry-background);
      border: var(--sentry-border);
      border-radius: var(--sentry-border-radius);
      box-shadow: var(--sentry-box-shadow);
      font-weight: 600;
      color: var(--sentry-success);
      padding: 12px 24px;
      line-height: 25px;
      display: grid;
      align-items: center;
      grid-auto-flow: column;
      gap: 6px;
      cursor: default;
    }

    .success-icon path {
      fill: var(--sentry-success);
    }
  }

  > div.notification {
    position: fixed;
    left: var(--sentry-left);
    right: var(--sentry-right);
    bottom: var(--sentry-bottom);
    top: var(--sentry-top);
    background-color: var(--sentry-background);
    color: var(--sentry-foreground);
    border: var(--sentry-border);
    border-radius: var(--sentry-border-radius);
    box-shadow: var(--sentry-box-shadow);
    padding: 12px 24px;
    font-family: var(--sentry-font-family);
    font-size: var(--sentry-font-size);
    z-index: var(--sentry-z-index) +1; /* Above other elements */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;

    &.show {
      opacity: 1;
      visibility: visible;
    }

    &.error {
      color: var(--sentry-error);
    }

    &.success {
      color: var(--sentry-success);
    }

  }
}