@import "../settings/variables";
@import "../animations/loading";
@import "../tools/ellipsis";

$token-left-padding: spacing(md);
$token-right-padding: spacing(xs);
$border-radius: 200px;

.file-token {
  $root: #{&};
  $progress-complete: #{&}--progress-complete;
  $finalized: #{&}--finalized;
  $error: #{&}--error;

  display: inline-flex;
  max-width: 100%;
  border-radius: $border-radius;
  user-select: none;
  -ms-user-select: none;
  color: $file-token-color;
  background-color: $file-token-background-color;
  transition: color 0s linear, background-color 0s linear;
  will-change: opacity, box-shadow, transform;

  &:focus {
    box-shadow: $file-token-focus-shadow;
    outline: none;

    &#{$progress-complete} {
      background-color: $file-token-hover-background-color;
    }
  }

  &--progress-complete {
    color: $file-token-complete-color;
    background-color: $file-token-complete-background-color;
  }

  &--finalized {
    @include pulse-animation(0s);
  }

  &__token {
    #{$root} & {
      position: relative;
      padding-left: $token-left-padding;
      padding-right: $token-right-padding;
      overflow: hidden;
      box-sizing: border-box;
      border: none;
      border-radius: $border-radius;
      background-color: inherit;

      &:hover {
        background-color: inherit;
      }
    }

    #{$progress-complete} & {
      &:hover,
      &--hover {
        background-color: $file-token-hover-background-color;
      }
    }

    #{$error} & {
      background-color: $file-token-error-background-color;

      &:hover {
        background-color: $file-token-error-background-color;
      }
    }
  }

  &__label {
    $label: #{&};

    #{$root} & {
      pointer-events: none;
      color: inherit;
      min-width: spacing(lg);
    }

    #{$progress-complete} &--has-action {
      pointer-events: all;

      &:hover,
      &#{$label}--hover {
        text-decoration: underline;
        cursor: pointer;
      }
    }

    #{$error} & {
      color: $file-token-complete-color;
    }
  }

  &__icon {
    #{$root} & {
      pointer-events: inherit;
      color: inherit;
      margin-left: spacing(xs);
      transform: translateY(0);

      &:hover,
      &--hover {
        color: $file-token-color;
        z-index: 1;
      }
    }

    #{$error} & {
      color: $file-token-complete-color;

      &:hover,
      &--hover {
        color: $file-token-error-background-color;
      }
    }
  }

  &__loader {
    pointer-events: none;
    overflow: hidden;
    // using border-radius to fix overflow issue in Safari
    border-radius: $border-radius 0 0 $border-radius;

    #{$progress-complete} & {
      border-radius: $border-radius;
    }

    #{$progress-complete}:not(#{$finalized}) & {
      opacity: 0;
    }

    #{$finalized} & {
      @include fade-in-animation(0s);
    }

    #{$error} & {
      display: none;
    }
  }

  &__overlay {
    position: relative;
    height: 100%;
    top: 0;
    left: 0;
    align-items: center;
    margin-left: $token-left-padding;
    margin-right: $token-right-padding;
    color: $file-token-loading-color;
    will-change: width;
  }

  &__file-name {
    @include ellipsis;
  }

  &__file-ext {
    white-space: nowrap;
    overflow: hidden;
    flex-shrink: 0;
  }

  &__tooltip-children-wrapper {
    max-width: 100%;
  }
}