@import '../variables';
@import '../theme-colors';

// File Upload
.custom-file {
  height: calc(1.5em + 0.75rem + 9px);

  &:focus {
    outline: none !important;
  }

  .custom-file-input {
    z-index: 1;
    height: auto;

    &:focus ~ .custom-file-label {
      border-color: var(--default-border-color) !important;
    }

    &:disabled ~ .custom-file-label {
      pointer-events: none;
      background-color: var(--bg-input-readonly);
    }
  }

  .custom-file-label {
    z-index: 2;
    height: auto;
    line-height: 1.5;
    outline: none !important;
    font-size: 100% !important;
    box-shadow: none !important;
    padding: 10px 14px !important;
    background-color: var(--form-control-bg);
    border-color: var(--default-border-color);

    &:focus {
      border-color: var(--default-border-color);
    }

    &::after {
      height: auto;
      color: $white;
      cursor: pointer;
      line-height: 1.5;
      background: $brand-color;
      padding: 10px 14px !important;
      font-family: $default-font-family;
    }
  }
}

.custom-file-uploader {
  width: 150px;
  height: 150px;
  position: relative;
  border-radius: $default-radius;
  background-color: var(--base-color);

  .image-area {
    width: 150px;
    height: 150px;
    border-radius: $default-radius;

    img {
      width: auto;
      max-height: 100%;
      border-radius: $default-radius;
    }
  }

  .input-area {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    padding: 10px 0;
    background-color: rgba($black, 0.4);
    border-bottom-left-radius: $default-radius;
    border-bottom-right-radius: $default-radius;
    transition: all $default-transition-duration $action-transition-timing-function;

    label {
      width: 100%;
      font-size: 90%;
      cursor: pointer;
      margin-bottom: 0;
      text-align: center;
      color: $white !important;
    }
  }

  &:hover {
    .input-area {
      opacity: 1;
    }
  }

  &.circle {
    overflow: hidden;
    border-radius: 50%;

    .image-area {
      border-radius: 50%;

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

// Dropzone
.dropzone {
  min-height: 150px !important;
  padding: 20px 20px !important;
  border-radius: $default-radius !important;
  border: 1px dashed $brand-color !important;
  background: var(--form-control-bg) !important;

  svg {
    width: 80px;
    height: 80px;
  }

  .dz-preview {
    &.dz-image-preview {
      border-radius: 20px;
      background: transparent !important;
    }

    .dz-details {
      .dz-filename {
        border-radius: 20px;
        overflow: hidden !important;
      }
    }
  }
}

// SCSS for RTL Layout
[dir="rtl"] {
  .custom-file {
    .custom-file-label {
      text-align: start;

      &::after {
        right: initial;
        left: -1px;
        border-radius: 0.25rem 0 0 0.25rem;
      }
    }
  }
}