artistCreate.scss

.artist-registration-container {
  grid-column: 1/-1;
  min-height: 0;
  padding-top: $padding-l;
  margin-bottom: $margin-r;

  h1 {
    color: $primary-color-white;
  }

  form {
    display: flex;
    flex-direction: column;
    margin-top: $margin-r;

    label,
    .label {
      color: $primary-color-white;
      margin-bottom: $margin-xs;

      span {
        color: $primary-color-white-darkest;
      }
    }

    .field {
      display: flex;
      flex-direction: column;
      margin-bottom: $margin-r;

      .sign-up-error {
        margin-top: $margin-xs;
        color: $validation-color-red;
      }
    }

    input[type="text"],
    input[type="password"],
    input[type="email"] {
      border: none;
      background-image: none;
      background-color: $primary-color-white;
      padding: $padding-xs;
      border-radius: 24px;
      outline: rgba($primary-color-white, 0);
    }

    input[type="submit"] {
      width: fit-content;
      font-size: 18px;
    }

    label[for="avatar"] {
      cursor: pointer;
      width: 72px;
      height: 72px;
      border: 2px dashed $primary-color-white;
      border-radius: 50%;
      background-color: $primary-color-darkblue-lightest;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;

      .camera-icon {
        width: 24px;
        height: 24px;
      }

      .image-container {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 2;

        img {
          border-radius: 50%;
        }
      }
    }

    #avatar-label:hover {
      cursor: pointer;
    }

    #upload-avatar {
      opacity: 0;
      width: 100%;
      height: 100%;
      position: absolute;
    }

    .actions {
      margin-top: $margin-s;
      display: flex;
      align-items: center;
      justify-content: space-between;

      a {
        text-decoration: underline;
        font-weight: bold;
      }
    }
  }
}

@media only screen and (min-width: 768px) {
  .artist-registration-container {
    grid-column: 4/10;
  }
}