TelegramPWA/src/components/common/File.scss

.File {
  --secondary-color: var(--color-text-secondary);

  .Message.own & {
    --secondary-color: var(--color-text-green);
  }

  .content-inner & {
    min-width: 14rem;

    @media (max-width: 340px) {
      min-width: 11rem;
    }
  }

  display: flex;
  align-items: center;

  .file-icon-container {
    position: relative;
    margin-inline-end: 0.75rem;
  }

  .file-progress,
  .file-icon,
  .file-preview {
    width: 3.375rem;
    height: 3.375rem;
    border-radius: var(--border-radius-messages-small);
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .file-progress {
    position: absolute;
    top: 0;
    left: 0;
  }

  .file-icon {
    padding: 1rem 0.75rem 0.5rem;
    align-items: flex-end;
    flex-shrink: 0;
    position: relative;
    color: white;
    clip-path: polygon(0 0, calc(100% - 1.125rem) 0, 100% 1.125rem, 100% 100%, 0 100%);

    transition: clip-path 0.15s ease-in;

    .file-ext {
      font-size: 1rem;
      font-weight: var(--font-weight-medium);
      transition: opacity 0.15s;
    }

    &::after {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      border-bottom-left-radius: 0.25rem;
      border-color: rgba(black, 0.25);
      border-width: 0.5625rem;
      border-style: solid;
      /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
      transition: border-width 0.15s ease-in;
    }
  }

  .file-preview {
    background: transparent;
    overflow: hidden;

    & + .action-icon,
    & + .file-progress {
      background: rgba(black, 0.5);
      border-radius: var(--border-radius-messages-small);
    }

    img {
      object-fit: cover;
    }
  }

  .action-icon {
    color: #fff;
    font-size: 1.5rem;
    position: absolute;
    top: 0;
    width: 3.375rem;
    height: 3.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s;
  }

  &.interactive .file-icon-container {
    cursor: var(--custom-cursor, pointer);
    margin-inline-end: 0.75rem;

    &:hover {
      .file-icon::after {
        border-width: 0;
      }

      .file-icon {
        clip-path: polygon(0 0, 100% 0, 100% 0, 100% 100%, 0 100%);
      }

      .action-icon {
        opacity: 1;

        &.hidden {
          opacity: 0;
        }
      }

      .file-ext {
        opacity: 0;
      }
    }
  }

  .file-info {
    margin-top: 0.1875rem;
    margin-right: 0.125rem;
    white-space: nowrap;
    overflow: hidden;
    flex-grow: 1;

    & + .Link {
      font-size: 0.75rem;
      color: var(--color-text-secondary);
      padding-left: 1rem;
      white-space: nowrap;
    }
  }

  .file-title {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: var(--font-weight-medium);
    overflow: hidden;
    text-overflow: ellipsis;

    .emoji {
      vertical-align: -4px;
    }
  }

  .file-subtitle {
    font-size: 0.875rem;
    line-height: 0.9375rem;
    color: var(--secondary-color);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;

    span + span {
      &::before {
        content: "\00a0\2022\00a0";
      }
    }
  }

  &.smaller {
    --background-color: var(--color-background);
    --border-radius-messages-small: 0.3125rem;

    .action-icon,
    .file-progress,
    .file-icon,
    .file-preview {
      width: 3rem;
      height: 3rem;
    }

    .file-icon {
      padding-bottom: 0.375rem;

      &::after {
        border-width: 0 1rem 1rem 0;
      }
    }

    .file-info {
      margin-top: -0.125rem;
    }

    .file-title {
      font-weight: var(--font-weight-normal);
    }

    .file-subtitle {
      line-height: 1rem;
    }
  }

  &:dir(rtl),
  &[dir="rtl"] {
    .file-progress,
    .file-icon,
    .file-preview {
      margin-left: 0.75rem;
      margin-right: 0;
    }

    .file-info {
      text-align: right;

      & + .Link {
        padding-left: 0;
        padding-right: 1rem;
      }
    }

    .action-icon {
      left: auto;
      right: 0;
    }
  }
}

// Document extension colors
.File .file-progress,
.File .file-icon {
  &.red {
    background-color: var(--color-error);
  }

  &.orange {
    background-color: var(--color-warning);
  }

  &.green {
    background-color: var(--color-text-green);
  }
}