@use "sass:color";
@use "./../../variables" as *;
@use "./../../functions" as *;

.form__control.fancyfile {
  display: flex;
  flex-direction: column;

  & input[type="file"] {
    order: 1;
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    opacity: 0;

    & ~ .file--name {
      order: 999;

      &:not(:empty) {
        border-right: 1px solid var(--border-color-main);
        border-bottom: 1px solid var(--border-color-main);
        border-left: 1px solid var(--border-color-main);
        border-bottom-right-radius: var(--border-radius-medium);
        border-bottom-left-radius: var(--border-radius-medium);
        padding: $input-padding-y $input-padding-x;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
        transition: $form-transition;
      }

      &:empty {
        & ~ .form__label {
          border-bottom-right-radius: var(--border-radius-medium);
          border-bottom-left-radius: var(--border-radius-medium);
        }
      }
    }

    & ~ .form__label {
      order: 2;
      cursor: pointer;
      width: 100%;
      display: block;
      position: relative;
      margin-bottom: 0;
      text-align: center;
      padding: var(--spacer) var(--spacer) calc(var(--spacer) * 3);
      border: 1px solid var(--border-color-main);
      border-top-left-radius: var(--border-radius-medium);
      border-top-right-radius: var(--border-radius-medium);
      background-color: var(--gray-1);
      transition: $form-transition;

      &::after {
        content: "";
        position: absolute;
        width: calc(var(--spacer) * 2);
        height: calc(var(--spacer) * 2);
        top: auto;
        left: 50%;
        bottom: calc(var(--spacer) * 0.5);
        transform: translateX(-50%);
        margin: 0;
        background-size: calc(var(--spacer) * 2) auto;
        background-image: escape-svg($form-file-indicator);
        transition:
          background-image 0.15s ease-in-out,
          $form-transition;
      }
    }

    &:hover {
      & ~ .form__label {
        border-color: var(--input-hover-border-color);
        background-color: var(--gray-2);

        &::after {
          background-image: escape-svg($form-file-indicator-hover);
        }
      }

      & ~ .file--name {
        &:not(:empty) {
          border-color: var(--input-hover-border-color);
        }
      }
    }

    @each $key, $value in $theme-colors {
      &.input--#{$key} {
        & ~ .form__label {
          border-color: $value;
        }

        & ~ .file--name {
          &:not(:empty) {
            border-color: $value;
          }
        }

        &:hover {
          & ~ .form__label {
            border-color: color.mix(black, $value, 25%);
          }

          & ~ .file--name {
            &:not(:empty) {
              border-color: color.mix(black, $value, 25%);
            }
          }
        }
      }
    }
  }
}

input[type="file"] {
  cursor: pointer;

  &::-webkit-file-upload-button,
  &::file-selector-button {
    background-color: var(--light);
    padding: $input-padding-y $input-padding-x;
    margin: calc($input-padding-y * -1) $input-padding-x calc($input-padding-y * -1) calc($input-padding-x * -1);
    -webkit-margin-end: $input-padding-x;
    margin-inline-end: $input-padding-x;
    color: var(--html-color);
    pointer-events: none;
    border-color: var(--border-color-main);
    border-style: solid;
    border-width: 0;
    border-inline-end-width: 1px;
    border-right-width: 1px;
    border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
    transition: $form-transition;
  }

  &:hover {
    &:not(:disabled, [readonly]) {
      &::-webkit-file-upload-button,
      &::file-selector-button {
        background-color: var(--gray-2);
      }
    }
  }
}