/*!
 * Copyright (c) 2020 the original author or authors
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
 * or implied. See the License for the specific language governing
 * permissions and limitations under the License.
 */

@import 'colors.scss';
@import 'sizes.scss';

$border-radius: 12px;

.dropzone {
  position: relative;
  background: $lighter-blue;
  opacity: 0.8;
  margin-top: 24px;

  border-radius: $border-radius;

  &--container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 135px;
    font-weight: 800;
    font-size: $text-sm;
    border: dashed 2px $dark-gray;
    border-radius: $border-radius;
    transition: 0.2s;

    &.expand {
      height: 250px;
    }
  }

  .title {
    text-align: center;
    font-size: $text-md;
    color: $dark-blue;
    margin: 0;

    &.expand {
      margin: auto;
      max-width: 450px;
      line-height: 35px;
      font-size: $text-lg;
      color: $dark-blue;
    }
  }

  .description {
    text-align: center;
    font-weight: 400;
    font-size: $text-md;
    margin: 1rem auto 0;
    max-width: 430px;
  }

  input {
    width: 100%;
    height: 100%;
    cursor: pointer;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    opacity: 0;
  }

  &:hover {
    transition: 0.2s;
    opacity: 1;
  }

  &_inline {
    padding: 0;
  }
}
