@use "variables";

.bt-popup-wrap {
  top: variables.$bt-header-height;
}

.bt-popup-content {
  background-color: variables.$white;
  border: 1px solid variables.$grey-90;
  border-radius: variables.$border-radius;
  color: variables.$grey-90;
  font-size: variables.$base-font-size;
  margin-top: 1rem;
  padding: 1.3rem;
  text-align: center;
  width: 430px;

  &.bt-popup-warn {
    border-color: variables.$warn-color;
    color: variables.$warn-color;

    .bt-primary {
      background-color: variables.$warn-color;
    }

    .bt-secondary {
      border-color: variables.$warn-color;
      color: variables.$warn-color;

      &:hover {
        background: variables.$warn-color;
      }
    }
  }

  &.bt-popup-error {
    border-color: variables.$error-color;
    color: variables.$error-color;

    .bt-primary {
      background-color: variables.$error-color;
    }

    .bt-secondary {
      border-color: variables.$error-color;
      color: variables.$error-color;

      &:hover {
        background: variables.$error-color;
      }
    }
  }

  &.bt-popup-success {
    border-color: variables.$berta-accent;
    color: variables.$berta-accent;

    .bt-primary {
      background-color: variables.$berta-accent;
    }

    .bt-secondary {
      border-color: variables.$berta-accent;
      color: variables.$berta-accent;

      &:hover {
        background: variables.$berta-accent;
      }
    }
  }
}

.bt-popup-action-wrap {
  margin-top: 1.3rem;
  display: flex;
  justify-content: center;

  button {
    // -moz-appearance: none;
    // -ms-progress-appearance: none;
    // -webkit-appearance: none;
    appearance: none;
    border-radius: variables.$border-radius;
    flex-shrink: 1;
    padding: 0.75em 1.3em;
    width: 30%;
    margin: 0 0.5rem;
  }

  .bt-primary {
    color: variables.$white;

    &:hover {
      opacity: 0.6;
    }
  }

  .bt-secondary {
    background: variables.$white;
    border-width: 1px;
    border-style: solid;

    &:hover {
      color: variables.$white;
    }
  }
}

.bt-popup-overlay {
  background: rgba(variables.$black, 0.3);
}
