@use "../variables" as *;
@use "../mixins" as *;
@use "../utils" as *;

.mie.splitview {
  position: relative;
  overflow: hidden;

  align-items: stretch;
  display: flex;

  max-height: 100%;
  height: 100%;
  width: 100%;

  > .overlay {
    background-color: mvar("splitview.overlay.bg");
    position: absolute;
    height: 100%;
    z-index: 5;
    width: 100%;
    left: 0;
    top: 0;
  }

  > .sidebar {
    border-right: 1px solid mvar("divider.bg");
  }

  > .container {
    // prettier-ignore
    background-image:
      linear-gradient(
          mvar("splitview.bg.overlay"),
          mvar("splitview.bg.overlay")
      ),
      linear-gradient(
          mvar("splitview.bg.main"),
          mvar("splitview.bg.main")
      );

    transition: width 0.3s ease;
    position: relative;

    @include flex(column, stretch, stretch);
    height: 100%;
    width: 100%;
    flex: 1;

    > .content {
      flex-direction: column;
      overflow: auto;
      display: flex;
    }
  }
}
