@import '~@payloadcms/ui/scss';

@layer payload-default {
  .rich-text-upload {
    @extend %body;
    @include shadow-sm;
    max-width: base(15);
    display: flex;
    align-items: center;
    background: var(--theme-input-bg);
    border: 1px solid var(--theme-elevation-100);
    position: relative;
    font-family: var(--font-body);

    &:hover {
      border: 1px solid var(--theme-elevation-150);
    }

    &[data-slate-node='element'] {
      margin: base(0.625) 0;
    }

    &__card {
      @include soft-shadow-bottom;
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    &__topRow {
      display: flex;
    }

    &__thumbnail {
      width: base(3.25);
      height: auto;
      position: relative;
      overflow: hidden;
      flex-shrink: 0;

      img,
      svg {
        position: absolute;
        object-fit: cover;
        width: 100%;
        height: 100%;
        background-color: var(--theme-elevation-800);
      }
    }

    &__topRowRightPanel {
      flex-grow: 1;
      display: flex;
      align-items: center;
      padding: base(0.75);
      justify-content: space-between;
      max-width: calc(100% - #{base(3.25)});
    }

    &__actions {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      margin-left: base(0.5);

      .rich-text-upload__doc-drawer-toggler {
        pointer-events: all;
      }

      & > *:not(:last-child) {
        margin-right: base(0.25);
      }
    }

    &__removeButton {
      margin: 0;

      line {
        stroke-width: $style-stroke-width-m;
      }

      &:disabled {
        color: var(--theme-elevation-300);
        pointer-events: none;
      }
    }

    &__upload-drawer-toggler {
      background-color: transparent;
      border: none;
      padding: 0;
      margin: 0;
      outline: none;
      line-height: inherit;
    }

    &__doc-drawer-toggler {
      text-decoration: underline;
    }

    &__doc-drawer-toggler,
    &__list-drawer-toggler,
    &__upload-drawer-toggler {
      & > * {
        margin: 0;
      }

      &:disabled {
        color: var(--theme-elevation-300);
        pointer-events: none;
      }
    }

    &__collectionLabel {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &__bottomRow {
      padding: base(0.5);
      border-top: 1px solid var(--theme-elevation-100);
    }

    h5 {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    &__wrap {
      padding: base(0.5) base(0.5) base(0.5) base(1);
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &--selected {
      box-shadow: $focus-box-shadow;
      outline: none;
    }

    @include small-break {
      &__topRowRightPanel {
        padding: base(0.75) base(0.5);
      }
    }
  }
}