@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
@use 'libs/components/theme/src/lib/styles/variables' as *;
@use 'libs/components/theme/src/lib/styles/compat-tokens-mixins' as compatMixins;

@include compatMixins.sky-default-overrides('.sky-file-item') {
  --sky-override-file-item-background-color: #{$sky-background-color-neutral-light};
  --sky-override-file-item-border: 1px solid #{$sky-border-color-neutral-light};
  --sky-override-file-item-border-radius: 0;
  --sky-override-file-item-controls-padding-left: #{$sky-padding-plus-half};
  --sky-override-file-item-gap: #{$sky-margin};
  --sky-override-file-item-margin-bottom: #{$sky-margin};
  --sky-override-file-item-name-line-height: normal;
  --sky-override-file-item-name-font-size: #{$sky-font-size-base};
  --sky-override-file-item-name-font-weight: bolder;
  --sky-override-file-item-padding: #{$sky-padding-even-default};
  --sky-override-file-item-preview-img-box-shadow: 0 0 5px #666;
  --sky-override-file-item-preview-other-color: #{$sky-text-color-deemphasized};
  --sky-override-file-item-preview-other-font-size: 100px;
  --sky-override-file-item-size-line-height: normal;
  --sky-override-file-item-size-font-size: #{$sky-font-size-base};
  --sky-override-file-item-size-font-weight: 400;
  --sky-override-file-item-title-bottom-margin: #{$sky-margin};
}

@include compatMixins.sky-modern-overrides('.sky-file-item') {
  --sky-override-file-item-background-color: #{$sky-background-color-neutral-light};
  --sky-override-file-item-border: var(--modern-size-1) solid #{$sky-border-color-neutral-light};
  --sky-override-file-item-border-radius: var(--modern-border-radius-0);
  --sky-override-file-item-gap: #{$sky-margin};
  --sky-override-file-item-margin-bottom: #{$sky-margin};
  --sky-override-file-item-name-line-height: normal;
  --sky-override-file-item-name-font-weight: bolder;
  --sky-override-file-item-preview-img-box-shadow: 0 0 5px #666;
  --sky-override-file-item-preview-other-font-size: 100px;
  --sky-override-file-item-size-line-height: normal;
  --sky-override-file-item-size-font-size: var(--sky-font-size-body-m);
  --sky-override-file-item-size-font-weight: var(--sky-font-weight-body-m);
}

:host:not(:last-of-type) {
  .sky-file-item {
    margin-bottom: var(
      --sky-override-file-item-gap,
      var(--sky-space-gap-form-s)
    );
  }
}

:host-context(
    sky-file-drop.sky-form-field-stacked ~ sky-file-item:last-of-type
  ) {
  .sky-file-item {
    margin-bottom: var(
      --sky-override-file-item-margin-bottom,
      var(--sky-space-gap-form-l)
    );
  }
}

.sky-file-item {
  border: var(
    --sky-override-file-item-border,
    var(--sky-border-width-input-base) solid var(--sky-color-border-input-base)
  );
  border-radius: var(
    --sky-override-file-item-border-radius,
    var(--sky-border-radius-s)
  );
  background-color: var(
    --sky-override-file-item-background-color,
    var(--sky-color-background-file_drop)
  );
  margin-bottom: var(--sky-override-file-item-margin-bottom, 0);
  padding: var(
    --sky-override-file-item-padding,
    var(--sky-space-inset-balanced-s)
  );
}

.sky-file-item-name-container {
  flex: 1 1 auto;
  overflow: hidden;
}

.sky-file-item-controls {
  flex: 0 1 auto;
  padding-left: var(
    --sky-override-file-item-controls-padding-left,
    var(--sky-space-gap-text_action-m)
  );
}

.sky-file-item-name {
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  font-weight: var(
    --sky-override-file-item-name-font-weight,
    var(--sky-font-weight-body-m)
  );
  font-size: var(
    --sky-override-file-item-name-font-size,
    var(--sky-font-size-body-m)
  );
  font-style: var(--sky-font-style-body-m);
  line-height: var(
    --sky-override-file-item-name-line-height,
    var(--sky-font-line_height-body-m)
  );
}

.sky-file-item-size {
  font-weight: var(
    --sky-override-file-item-size-font-weight,
    var(--sky-font-weight-body-s)
  );
  font-size: var(
    --sky-override-file-item-size-font-size,
    var(--sky-font-size-body-s)
  );
  font-style: var(--sky-font-style-body-s);
  line-height: var(
    --sky-override-file-item-size-line-height,
    var(--sky-font-line_height-body-s)
  );
}

.sky-file-item-title {
  margin-bottom: var(
    --sky-override-file-item-title-bottom-margin,
    var(--sky-space-gap-stacked_supplemental-m)
  );
  display: flex;
}

.sky-file-item-content {
  display: flex;
}

.sky-file-item-preview {
  flex-basis: 25%;
}

.sky-file-item-content-custom {
  flex-basis: 75%;
}

.sky-file-item-preview-img-container {
  text-align: center;
}

.sky-file-item-preview-img {
  max-width: 100%;
  height: auto;
  box-shadow: var(
    --sky-override-file-item-preview-img-box-shadow,
    var(--sky-elevation-raised-100)
  );
}

.sky-file-item-preview-other {
  color: var(
    --sky-override-file-item-preview-other-color,
    var(--sky-color-icon-deemphasized)
  );
  font-size: var(
    --sky-override-file-item-preview-other-font-size,
    var(--sky-size-illustration-l)
  );
  line-height: 1;
  text-align: center;
  width: 100%;
}
