@ozen-ui/kit/__inner__/esm/components/FileNext/File.css

React component library

/* stylelint-disable */
.FileNext {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--file-gap);
  box-sizing: border-box;
  block-size: var(--file-block-size);
  margin-block: var(--file-block-margin);
}
.FileNext-ContentMain {
    color: var(--file-content-color);
    transition: color var(--transition-default);
  }
.FileNext-Hint {
    color: var(--file-hint-color);
    transition: color var(--transition-default);
  }
.FileNext-Main {
    display: flex;
    align-items: center;
    gap: var(--file-gap);
  }
.FileNext-Trailing {
    display: flex;
    align-items: center;
  }
.FileNext_status_default {
    --file-content-color: var(--color-content-primary);
    --file-hint-color: var(--color-content-secondary);
  }
.FileNext_status_loading {
    --file-content-color: var(--color-content-disabled);
    --file-hint-color: var(--color-content-secondary);
  }
.FileNext_status_error {
    --file-content-color: var(--color-content-primary);
    --file-hint-color: var(--color-content-error);
  }
.FileNext_size_xs {
    --file-gap: var(--spacing-2xs);
    --file-block-size: 40px;
    --file-block-margin: 0;
  }
.FileNext_size_xs .FileNext-ContentMain {
      font: var(--typography-text-xs-font);
      letter-spacing: var(--typography-text-xs-letter_spacing, 0);
      text-transform: var(--typography-text-xs-text_transform, none);
    }
.FileNext_size_xs .FileNext-Hint {
      font: var(--typography-text-3xs-font);
      letter-spacing: var(--typography-text-3xs-letter_spacing, 0);
      text-transform: var(--typography-text-3xs-text_transform, none);
    }
.FileNext_size_s {
    --file-gap: var(--spacing-xs);
    --file-block-size: 40px;
    --file-block-margin: var(--spacing-3xs);
  }
.FileNext_size_s .FileNext-ContentMain {
      font: var(--typography-text-s-font);
      letter-spacing: var(--typography-text-s-letter_spacing, 0);
      text-transform: var(--typography-text-s-text_transform, none);
    }
.FileNext_size_s .FileNext-Hint {
      font: var(--typography-text-3xs-font);
      letter-spacing: var(--typography-text-3xs-letter_spacing, 0);
      text-transform: var(--typography-text-3xs-text_transform, none);
    }
.FileNext_size_m {
    --file-gap: var(--spacing-xs);
    --file-block-size: 40px;
    --file-block-margin: var(--spacing-2xs);
  }
.FileNext_size_m .FileNext-ContentMain {
      font: var(--typography-text-m-font);
      letter-spacing: var(--typography-text-m-letter_spacing, 0);
      text-transform: var(--typography-text-m-text_transform, none);
    }
.FileNext_size_m .FileNext-Hint {
      font: var(--typography-text-2xs-font);
      letter-spacing: var(--typography-text-2xs-letter_spacing, 0);
      text-transform: var(--typography-text-2xs-text_transform, none);
    }
.FileNext_size_l {
    --file-gap: var(--spacing-s);
    --file-block-size: 48px;
    --file-block-margin: var(--spacing-2xs);
  }
.FileNext_size_l .FileNext-ContentMain {
      font: var(--typography-text-l-font);
      letter-spacing: var(--typography-text-l-letter_spacing, 0);
      text-transform: var(--typography-text-l-text_transform, none);
    }
.FileNext_size_l .FileNext-Hint {
      font: var(--typography-text-xs-font);
      letter-spacing: var(--typography-text-xs-letter_spacing, 0);
      text-transform: var(--typography-text-xs-text_transform, none);
    }