signup-modal.scss

@import 'variables';
@import 'config/import';

.authentication-modal {
  &__box {
    position: relative;
    margin-left: var(--su-4);
    margin-right: var(--su-4);
    height: auto;
    width: auto;
    background: var(--card-bg);
    color: var(--card-color);
    border-radius: var(--radius);

    @media (min-width: $breakpoint-s) {
      margin: inherit;
    }
  }

  &__close-btn {
    position: absolute;
    top: var(--su-3);
    right: var(--su-3);
  }

  &__container {
    display: grid;
    grid-gap: var(--su-2);
    padding: var(--su-4);

    @media (min-width: $breakpoint-s) {
      padding: var(--su-8) var(--su-8) var(--su-6);
    }
  }
  &__image-container {
    width: var(--su-8);
    height: var(--su-8);
    margin-bottom: var(--su-2);

    @media (min-width: $breakpoint-s) {
      height: 80px;
      width: 80px;
    }
  }

  &__image {
    border-radius: var(--radius);
    transform: rotate(-10deg);
    height: auto;
    width: 100%;
  }

  &__content {
    display: grid;
    grid-gap: var(--su-1);
  }

  &__title {
    color: var(--card-color);
    font-size: var(--fs-2xl);
    line-height: var(--lh-tight);

    @media (min-width: $breakpoint-s) {
      font-size: var(--fs-3xl);
    }
  }

  &__description {
    color: var(--card-color-secondary);
  }

  &__actions {
    display: grid;
    grid-gap: var(--su-1);
    padding: 0 var(--su-4) var(--su-4);

    @media (min-width: $breakpoint-s) {
      display: flex;
      flex-direction: column;
      width: 100%;
      margin: 0 auto;
      justify-self: center;
      padding: 0 var(--su-8) var(--su-7);
    }
  }

  &__footer {
    border-top: 2px solid var(--base-100);
    padding: var(--su-2) var(--su-4);

    @media (min-width: $breakpoint-s) {
      padding: var(--su-5) var(--su-8);
    }
  }

  &__footer-label {
    font-size: var(--fs-s);
    line-height: var(--lh-tight);
    color: var(--card-color-secondary);
    text-align: center;
  }
}