@import '../../scss/styles.scss';

.file-details {
  background-color: var(--theme-elevation-50);

  header {
    display: flex;
    align-items: flex-start;
    border-bottom: 1px solid var(--theme-elevation-0);
  }

  &__remove {
    margin: $baseline $baseline $baseline 0;
  }

  &__main-detail {
    padding: $baseline base(1.5);
    width: auto;
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-self: center;
    gap: base(0.25);
  }

  &__toggle-more-info {
    font-weight: 600;
    text-decoration: none;

    &:hover,
    &:focus-visible {
      text-decoration: underline;
    }
  }

  &__toggle-icon {
    padding: calc(var(--base) / 4);
  }

  &__sizes {
    margin: 0;
    padding: base(1.5) $baseline 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;

    li {
      width: 50%;
      padding: 0 base(0.5);
      margin-bottom: $baseline;
    }
  }

  &__size-label {
    color: var(--theme-elevation-400);
  }

  &__file-mutation {
    display: flex;
    margin-top: base(0.25);
    gap: calc(var(--base) / 2);
  }

  &__edit {
    cursor: pointer;
    background-color: var(--theme-elevation-150);
    border: none;
    border-radius: $style-radius-s;
    padding: base(0.25) base(0.5);

    &:hover {
      background-color: var(--theme-elevation-100);
    }
  }

  @include large-break {
    &__main-detail {
      padding: $baseline;
    }

    &__sizes {
      display: block;
      padding: $baseline $baseline base(0.5);

      li {
        padding: 0;
        width: 100%;
      }
    }
  }

  @include mid-break {
    header {
      flex-wrap: wrap;
    }

    .thumbnail {
      width: 50%;
      order: 1;
    }

    &__remove {
      order: 2;
      margin-left: auto;
      margin-right: $baseline;
    }

    &__main-detail {
      border-top: $style-stroke-width-m solid var(--theme-elevation-0);
      order: 3;
      width: 100%;
    }
  }
}
