@use 'sass:list';
@use '../../sprite';
@use '../../abstract';
@use '../../base/token';

$file-icons: (
  sprite.$solid-csv,
  sprite.$solid-doc,
  sprite.$solid-docx,
  sprite.$solid-pdf,
  sprite.$solid-ppt,
  sprite.$solid-pptx,
  sprite.$solid-txt,
  sprite.$solid-xls,
  sprite.$solid-xlsx,
  sprite.$solid-eps,
  sprite.$solid-gif,
  sprite.$solid-img,
  sprite.$solid-jpeg,
  sprite.$solid-jpg,
  sprite.$solid-png,
  sprite.$solid-svg,
  sprite.$solid-tiff,
  sprite.$solid-webp,
  sprite.$solid-zip,
  sprite.$solid-bmp,
  sprite.$solid-rar
);

.cds-file-icon {
  $this: &;

  color: var(--gray-700);
  font-size: token.$font-size-1;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  overflow: hidden;

  svg {
    flex: none;
  }

  &__ext {
    @include abstract.bg2x-sprite();
    margin-inline-start: 8px;
    flex: none;

    @each $sprite in $file-icons {
      &--#{nth($sprite, 10)} {
        @include abstract.sprite2x($sprite);
      }
    }
  }

  &__name {
    max-width: 100%;
    margin-inline-start: 6px;
    text-overflow: ellipsis;
    text-wrap: nowrap;
    overflow: hidden;
    cursor: pointer;

    &:hover {
      cursor: pointer;
      text-decoration: underline;
    }
  }

  &__size {
    flex: none;
    margin-inline-start: 6px;
    text-transform: uppercase;
    color: var(--gray-400);
  }

  &:where(.is-disable) {
    color: var(--gray-300);

    #{$this}__name {
      cursor: default;
    }

    #{$this}__size {
      color: inherit;
    }
  }
}