@import "./../variables";

.metadata {
  height: 100%;
  padding: 1rem !important;
  &-container {
    display: grid;
    grid-template-columns: 400px auto;
    grid-auto-flow: column;
    height: inherit;
    .metadata-tree-view {
      display: flex;
      flex-direction: column;
      .metadata-tree-view__title {
        font-size: 1.5em;
        font-weight: bolder;
        margin-top: calc(15px - 0.5rem);
        margin-bottom: calc(15px + 0.5rem);
      }
      ui-tree-panel {
        .row {
          width: 100%;
          > .col {
            padding: 0;
          }
        }
        .ui-tree__container {
          .ui-tree__selected {
            .digi-move-line-down {
              color: var(--secondary, $secondary);
            }
            .ui-tree__label {
              color: var(--secondary, $secondary);
              background-color: transparent;
            }
          }
          .ui-tree__expander {
            .digi-move-line-down {
              color: var(--secondary, $secondary);
            }
          }
          .ui-tree__spacer__lines {
            border-bottom: 1px solid var(--secondary, $secondary);
            border-left: 1px solid var(--secondary, $secondary);
          }
          .ui-tree__label.ui-tree__selectable:hover {
            background-color: transparent;
            color: var(--secondary, $secondary);
          }
        }
      }
    }
    .metadata-detail > .ui-panel {
      height: 100%;
      .ui-panel__body {
        .row {
          display: flex;
          align-items: center;
          &.metadata-detail__el {
            flex-direction: row-reverse;
            justify-content: flex-end;
            padding: 15px 0;
            > .col {
              margin: 0;
              &:last-child {
                display: flex;
                align-items: center;
                gap: 15px;
                padding: 0;
                margin-right: 20px;
                ui-icon {
                  font-size: 24px;
                  margin-top: 25px;
                }
              }
            }
          }
          .metadata-detail__title {
            font-size: 25px;
            padding: 0;
          }
        }
      }
    }
  }
}
