@import '../constants/dimensions';
@import '../constants/colors';

.env-modal.modal__body {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  grid-template-rows: 100%;
  max-width: 100%;
  width: 100%;

  .env-modal__sidebar {
    border-right: 1px solid @hl-md;
    padding: @padding-md 0;
    box-sizing: border-box;
    overflow-y: auto;
    height: 100%;

    .env-modal__sidebar-heading {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: @padding-sm @padding-sm 0;

      & > * {
        height: 100%;
        padding: 0;
      }

      & > *:first-child {
        width: 100%;
        padding: @padding-sm 0 @padding-sm @padding-sm;
      }

      button {
        color: @hl-xl;
        height: 100%;
        padding: @padding-sm;

        &:hover {
          color: var(--color-font);
        }
      }
    }

    .env-modal__sidebar-root-item,
    .env-modal__sidebar-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-rows: @line-height-xs;
      color: @hl;

      & > button {
        padding: 0 @padding-md 0 @padding-md;
        width: 100%;

        &:first-child {
          padding-right: 0;
        }

        .editable {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          display: block;
          padding-right: @padding-xs;
          box-sizing: border-box;
          width: 100%;
          line-height: @line-height-xs;
        }
      }

      &.env-modal__sidebar-item--active > button {
        color: var(--color-font);
        background-color: @hl-xs;
      }

      &:hover > button {
        background-color: @hl-xs;
      }
    }

    .env-modal__sidebar-item {
      & > button {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding-left: @padding-md;
      }
    }
  }

  .env-modal__main {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-columns: 100%;
    height: 100%;
    width: 100%;

    .env-modal__editor {
      display: block;
      max-height: 100%;
      height: 100%;
      max-width: 100%;
      width: 100%;
    }

    .env-modal__main__header {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: @padding-sm @padding-md @padding-sm;
      height: @line-height-sm;
    }

    h1, h1 > * {
      padding: 0;
      font-size: @font-size-xl;
      width: 100%;
    }
  }
}