@use "variables";

berta-background-gallery-editor {
  display: flex;
  min-height: 100%;

  aside {
    flex-shrink: 0;
    padding-top: 0;
    width: 384px;
    border-right: 1px solid variables.$grey-10;

    .fa-remove:before {
      content: "" !important;
    }
  }

  .content {
    padding: 1.3em;
    flex-grow: 1;

    .header {
      display: flex;
      column-gap: 1em;
      align-items: center;

      h3 {
        flex-grow: 1;
      }

      .close {
        font-size: 1.5em;
      }
    }

    berta-files-input {
      width: 156px;
      height: 117px;

      .form-group,
      label {
        width: 100%;
        height: 100%;
      }

      .file-input-wrapper {
        flex-direction: column-reverse;
        height: 100%;
        align-items: center;
        justify-content: center;
        row-gap: 0.25em;
        border-radius: 0;

        .file-input {
          text-align: center;
          padding: 0;
          flex-grow: 0;
        }

        .add {
          width: 30px;
          height: 30px;
          margin-right: 0;
        }
      }
    }
  }

  .entry-gallery {
    margin-bottom: 1em;
  }
}
