@import '../config/import';

.authentication-modal {
  &__container {
    display: grid;
    grid-gap: var(--su-4);
  }

  &__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);
  }

  &__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-4);
    }
  }

  &__footer {
    padding: var(--su-2) var(--su-4) 0 var(--su-4);
    margin: 0 calc(-1 * var(--modal-body-padding)) 0
      calc(-1 * var(--modal-body-padding));

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

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