@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;
        height: 100%;
        padding: @padding-sm;

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

  .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%;
    }
  }
}

// These are at the top-level because sorting pulls the row out into <body>
.env-modal__sidebar-root-item,
.env-modal__sidebar-item {
  z-index: 100000;
  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;
    }

    position: relative;
    .drag-handle {
      position: absolute;
      left: 0;
      opacity: 0;
      color: var(--hl-lg)
    }

    .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--dragging > button,
  &.env-modal__sidebar-item--active > button {
    color: var(--color-font);
    background-color: @hl-xs;
  }

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

  &.env-modal__sidebar-item--dragging .drag-handle,
  &:hover .drag-handle {
    opacity: 1;
  }
}

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