// TODO: Create global variables to be imported/reused

// ********************************************
// container definition
$el-container: #{$prefix}-modal;

// ********************************************
// elements
$el-body: #{$el-container}__body;
$el-body-wrapper: #{$el-container}__body-wrapper;

.#{$el-container}-image-library {
  .#{$el-body} {
    padding: 0px;
    overflow-y: hidden;
  }
  .#{$el-body-wrapper} {
    padding: 0px;
  }
  .wrapper {
    display: flex;
    .col-1 {
      flex: 3;
      margin: space(s) 0;
      overflow-y: auto;
      height: 60vh;
      .title {
        font-size: font-size(600);
        font-weight: font-weight(semibold);
        position: sticky;
        padding: 0 space(s) space(s);
        top: 0;
        background-color: white;
      }
      .imglibmodal-element {
        padding: space(xs) 0;
        outline-style: none;
        .content {
          padding: 0 space(s);
        }
        &:hover {
          background-color: color(neutral, 100);
          cursor: pointer;
        }
        &:focus {
          background-color: color(brand-primary, 200);
        }
      }
    }
    .col-2 {
      flex: 5;
      border-left: 1px solid #ebedf0;
      padding: space(s);
      height: 65vh;
      .title {
        text-align: center;
        font-size: font-size(600);
      }
      img, .#{$el-icon}, .#{$spinner-container} {
        margin: auto;
        width: 100%;
        height: 85%;
        padding: space(s);
        max-height: 85%;
        object-fit: contain;
        display: flex;
        justify-content: center;
      }
      .info {
        display: flex;
        flex-direction: column;
        height: 5vh;
        justify-content: space-between;
        .label {
          color: color(neutral, 500);
          padding-left: space(s);
          padding-right: space(xs);
          font-weight: font-weight(regular);
        }
        .value {
          font-weight: font-weight(semibold);
        }
      }
    }
  }
}