$primary: #0052ff;
$foreground-muted: #5b636e;
$white: #fff;
$black: #0a0b0d;

.-cbwsdk-css-reset {
  .-cbwsdk-redirect-dialog {
    &-backdrop {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      transition: opacity 0.25s;
      background-color: rgba($black, 0.5);

      &-hidden {
        opacity: 0;
      }
    }

    &-box {
      display: block;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 20px;
      border-radius: 8px;
      background-color: $white;
      color: $black;
    
      p {
        display: block;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        padding-bottom: 12px;
        color: $foreground-muted;
      }
    
      button {
        appearance: none;
        border: none;
        background: none;
        color: $primary;
        padding: 0;
        text-decoration: none;
        display: block;
        font-weight: 600;
        font-size: 16px;
        line-height: 24px;
      }

      &.dark {
        background-color: $black;
        color: $white;

        button {
          color: $primary;
        }
      }

      &.light {
        background-color: $white;
        color: $black;

        button {
          color: $primary;
        }
      }
    }
  }
}
