@use "../../styles/partials/mixins" as *;
@use "../../styles/partials/font-mixins" as *;
@use "../../styles/partials/colors";

.modal {
  width: 50rem;
  background: colors.$primary-light;
  @include flex(column, center, flex-start);
  border-radius: 2px;

  &__title {
    @include section-header;
    font-size: 2rem;
    margin-bottom: 0.2rem;
  }

  &__paragraph {
    @include body;
    margin-bottom: 1rem;
  }
}
.url-form {
  @include flex(column);
  width: 100%;

  &__input {
    padding: 0.5rem;
    font-family: var(--font-ibm-mono);
    @include text-input;
    border: none;
    border-bottom: 1px solid colors.$primary-dark;
    background-color: transparent;
    margin-bottom: 1rem;
    width: 100%;

    &:focus {
      outline: none;
    }
  }
  &__btn {
    @include primary-btn;
    @include cta-btn;
    color: colors.$primary-light;
    padding: 0.6rem 1rem;
    margin-top: 1rem;
    align-self: flex-start;
  }
}

.popup-overlay {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background-color: colors.$modal-overlay;
}
