@import 'base';

.register {
  height: 100%;
  overflow: scroll;
  background-color: color(white);

  a {
    text-decoration: underline;
    opacity: 0.54;
    color: inherit;

    &:hover {
      color: inherit;
      opacity: 1;
    }

    &:active {
      color: inherit;
      opacity: 0.54;
    }

    &:visited {
      color: inherit;
    }
  }

  &__welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: color(white);
    background-color: color(black, light);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    text-align: center;
    padding: 0 20px;

    &-instantjob {
      margin: -80px;
    }

    &-slogan {
      font-size: 30px;
      margin-bottom: 50px;
    }

    &-description {
      max-width: 500px;
      margin-bottom: 50px;
    }

    &-about {
      margin-top: 30px;
      margin-bottom: 30px;
    }
  }

  &__download {
    background-image: linear-gradient(to bottom, color(primary, light), color(primary));
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 20px;

    &-instantjob {
      margin: -80px;
    }

    &-slogan {
      font-size: 30px;
      margin-bottom: 50px;
    }

    &-button {
      background-color: transparent;
      margin-bottom: 50px;
      @extend %link;
    }

    &-preview {
      margin-bottom: 50px;
      background-color: transparent;
    }
  }

  &__app {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: color(black, pale);

    &-header {
      padding: 40px;
      font-size: 20px;
      text-align: center;
    }

    &-arguments {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    &-instructions-button {
      color: color(black, light);
      border: solid 2px;
      border-radius: 5px;
      padding: 8px 14px;
      @extend %link;
    }

    &-no-smartphone {
      color: color(black, light);
      margin-top: 20px;
      margin-bottom: 10px;
      padding: 0 30px;
      text-align: center;
    }

    &-action-call {
      font-size: 24px;
      font-weight: 500;
      padding: 20px;
      color: color(black, light);
    }

    &-download-button {
      @extend %link;
    }

    &-other-store {
      padding: 20px;
    }
  }

  &__argument {
    margin: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 300px;
    text-align: center;

    img {
      margin-bottom: 10px;
    }

    b {
      color: color(primary);
    }
  }

  &__instructions {
    background-color: color(white);
    display: flex;
    align-items: center;
    $padding: 30px;
    padding: $padding;
    opacity: 1;
    transition: opacity 0.5s;

    &.register__instructions_vertical {
      flex-direction: column;
    }

    &.register__instructions_flash {
      opacity: 0;
      transition: opacity 0s;
    }

    &-container {
      flex: 1;
      margin: $padding;


      &-switch {
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        &-option {
          padding: 8px 0;
          margin-right: 10px;
          font-weight: 500;
          color: color(black, light);
          @extend %link;
        }

        &-option_selected {
          color: color(action);
        }

        &-icon {
          margin-left: 10px;
        }
      }

      &-instruction {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;

        &-email {
          color: color(primary);
          font-weight: 600;
        }

        &-side {
          margin-left: 20px;
        }

        &-side_store {
          flex-shrink: 0;
          $size: 50px;
          background-position: center;
          background-size: cover;
          height: $size;
          width: $size;
        }
      }
    }
  }

  &__footer {
    background-color: color(primary);
    color: color(white);
    font-size: 10px;
    padding: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    height: 80px;
  }
}

.term-of-use {
  overflow: scroll;
}