@use '../../styles/Mixins/' as *;

.workarea-wrapper {
  position: relative;
  width: 100%;
  height: 100%;

  .workarea-main {
    display: flex;
    column-gap: 1rem;
    height: 100%;

    .workarea-children-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
    }
    .workarea-split-view {
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      background-color: var(--background-color-secondary);
      border-radius: 0.5rem;
    }

    .workarea-single-view {
      width: 100%;
      height: 100%;
      background-color: var(--background-color-secondary);
      border-radius: 0.5rem;
    }

    .workarea-split-view-left,
    .workarea-split-view-right {
      display: flex;
      flex-direction: column;
      height: 100%;
      width: 100%;
      row-gap: 1rem;
      background-color: var(--background-color-secondary);
      border-radius: 0.5rem;
      padding: 1rem;
    }
    .workarea-split-view-left {
      padding-right: 0.5rem;
    }
    .workarea-split-view-right {
      padding-left: 0.5rem;
    }
  }
}
.workarea-split-button {
  position: absolute;
  cursor: pointer;
  padding: 0.5rem;
  top: 0;
  right: 0;
  z-index: 20;

  &[data-selected='true'] {
    top: 0;
    right: 0;
    svg {
      opacity: 1;
    }
  }
  svg {
    opacity: 0.5;
  }
}