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

.authentication-feed {
  &__card {
    display: grid;
    grid-gap: var(--su-6);
    padding: var(--su-6);
    margin: var(--su-3);

    @media (min-width: $breakpoint-s) {
      padding: var(--su-7);
      margin: 0 0 var(--su-3) 0;
    }
  }

  &__container {
    @media (min-width: $breakpoint-s) {
      display: flex;
      grid-gap: var(--su-7);
      flex-direction: row;
      align-items: center;
    }
  }

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

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

    @media (min-width: $breakpoint-s) {
      display: flex;
      flex-direction: column;
      width: max-content;
      justify-self: center;
    }
  }
}

.authentication-widget {
  &__container {
    padding: var(--su-4);
  }

  &__image-container {
    width: var(--su-8);
    height: var(--su-8);
    margin-bottom: var(--su-2);
  }

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

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

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

  &__description {
    color: var(--card-color-secondary);
    margin-bottom: var(--su-4);
  }

  &__actions {
    display: grid;
    grid-gap: var(--su-1);
    width: 100%;

    @media (min-width: $breakpoint-s) {
      display: flex;
      flex-direction: column;
      justify-self: center;
    }
  }
}
#page-content.registrations {
  .devise-container {
    min-height: 480px;
    padding-top: calc(10vw + 35px);
    h1 {
      font-weight: 300;
      text-align: center;
      font-family: var(--ff-sans-serif);
      font-size: 30px;
      @media screen and (min-width: 520px) {
        font-size: 50px;
      }
    }
    a.sign-up-link {
      display: block;
      margin: 50px auto;
      width: 280px;
      max-width: 92%;
      text-align: center;
      padding: 20px 0px;
      border: 1px solid rgb(245, 245, 245);
      font-family: var(--ff-sans-serif);
      color: rgb(86, 98, 103);
      border-radius: 3px;
      font-size: 22px;
      img {
        opacity: 0.7;
        width: 24px;
        height: 24px;
        margin-right: 3px;
        vertical-align: -3px;
      }
      &:hover {
        border: 1px solid rgb(0, 231, 255);
      }
    }
  }
}
