/*
 * RAMEN FORM UPLOAD COMPONENT
 * 
 * Required component variables:

 * $form-preview-border-radius: Sets the border radius
 * $form-preview-border-selected: Sets the border colour once selected
 * $form-preview-border: The border of the preview
 * $form-preview-size-small: Size of the preview on smaller screens
 * $form-preview-size: size of the preview
 * $form-upload-color: Sets the text colour of the text field
*/

$form-preview-border-radius: 0 !default;
$form-preview-border-selected: 2px solid $c-black !default;
$form-preview-border: 2px solid $c-grey-200 !default;
$form-preview-size-small: toRems(80px) !default;
$form-preview-size: toRems(80px) !default;
$form-upload-color: $c-black !default;

@mixin form-upload {
  align-items: center;
  display: flex;
  padding: ($form-preview-size-small / 2) 0;
  position: relative;
  width: 100%;

  @include breakpoint($bp-small) {
    padding: ($form-preview-size / 2) 0;
  }

  &.is-selected {
    &:before {
      border-color: $c-white;
    }

    .c-form-upload__preview {
      border: $form-preview-border-selected;

      img {
        opacity: 1;
      }
    }
  }
}

@mixin form-upload-input {
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

@mixin form-upload-preview {
  border-radius: $form-preview-border-radius;
  border: $form-preview-border;
  color: $form-upload-color;
  height: $form-preview-size-small;
  left: 0;
  overflow: hidden;
  position: absolute;
  text-align: center;
  top: calc(50% - #{$form-preview-size-small} / 2);
  transition: border $global-transition-speed $global-easing 200ms;
  width: $form-preview-size-small;

  @include breakpoint($bp-small) {
    height: $form-preview-size;
    top: calc(50% - #{$form-preview-size} / 2);
    width: $form-preview-size;
  }

  img {
    border-radius: $form-preview-border-radius;
    height: 100%;
    opacity: 0;
    transition: opacity $global-transition-speed $global-easing 200ms;
    width: 100%;
  }
}

@mixin form-upload-label {
  color: $form-upload-color;
  font-weight: $font-weight-semibold;
  margin-left: $form-preview-size-small + $spacing-base;

  @include breakpoint($bp-small) {
    margin-left: $form-preview-size + $spacing-medium;
  }
}

@mixin form-upload-link {
  &,
  &:link,
  &:visited {
    font-weight: $font-weight-normal;
  }
}

@mixin form-upload-meta {
  font-size: $font-small;
  font-weight: $font-weight-normal;
  margin-top: $spacing-xxsmall;
}

.c-form-upload {
  @include form-upload;

  input[type='file'] {
    @include form-upload-input;
  }

  &__preview {
    @include form-upload-preview;
  }

  &__label {
    @include form-upload-label;
  }

  &__link {
    @include form-upload-link;
  }

  &__meta {
    @include form-upload-meta;
  }
}