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

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

  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;
    align-self: center;
  }

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

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

  &__toggle-more-info.open {
    .icon--chevron {
      transform: rotate(180deg);
    }
  }

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

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

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

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

    &__sizes {
      display: block;
      padding: $baseline $baseline base(.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%;
    }
  }
}