@import "../layout/flex";
@import "../components/content.scss";

.contextWrapper {
  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
  border-right: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
  width: 13vw;
  overflow-y: hidden;
  overflow-x: hidden;
  display: grid;
  height: 100vh;
  grid-template-areas:
    "title"
    "history"
    "settings";

  grid-template-columns: auto;
  grid-template-rows: 70px 1fr 175px;

  .contextTitle {
    grid-area: title;
    top: 0;
    font-family:
      Greycliff CF,
      var(--mantine-font-family);
    margin-bottom: var(--mantine-spacing-sm);
    background-color: var(--mantine-color-body);
    padding: var(--mantine-spacing-md);
    padding-top: 18px;
    width: 100%;
    height: 60px;
    border-bottom: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-7));
  }

  .contextList {
    grid-area: history;
    // overflow-x: none;
    // overflow-y: auto;

    .contextListItem {
      display: flex;
      flex: 1 1 auto;
      justify-content: center;
      align-items: center;
      text-decoration: none;
      border-top-right-radius: var(--mantine-radius-md);
      border-bottom-right-radius: var(--mantine-radius-md);
      color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
      padding: 0 var(--mantine-spacing-md);
      font-size: var(--mantine-font-size-sm);
      margin-right: var(--mantine-spacing-md);
      font-weight: 500;
      height: 44px;
      width: 100%;
      line-height: 44px;
      cursor: pointer;

      .contextItemName {
        flex: 1 1 auto;
        width: 110px;
        @include textWrapEllipsis;
      }

      &:hover {
        background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
        color: light-dark(var(--mantine-color-dark), var(--mantine-color-light));
      }

      &[data-active] {
        &,
        &:hover {
          border-left-color: var(--mantine-color-blue-filled);
          background-color: var(--mantine-color-blue-filled);
          color: var(--mantine-color-white);
        }
      }
    }
  }

  .settings {
    grid-area: settings;
    border: black;
    padding: var(--mantine-spacing-sm);
    > * {
      padding: 5px 0;
    }
  }
}
