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

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

  @include flex(column, stretch, stretch);
  transition: all 0.3s ease;
  overflow: hidden;
  z-index: 100;
  width: 0;

  & + .container {
    transition: width 0.3s ease;
  }

  > .content {
    min-width: mvar("sidebar.w");
    @include flex(column);
    max-height: 100%;
  }

  // Layout Styles & Animations
  &.width {
    min-width: 0;

    &.opened {
      transition: min-width 0.3s ease;
      min-width: mvar("sidebar.w");
    }
  }

  &.shift {
    margin-left: calc(#{mvar("sidebar.w")} * -1);

    &.opened {
      transition: margin-left 0.3s ease;
      margin-left: 0;

      & + .container {
        transition: margin-right 0.3s ease;
        margin-right: calc(#{mvar("sidebar.w")} * -1);
      }
    }
  }

  &.overlap {
    min-width: mvar("sidebar.w");
    position: absolute;
    height: 100%;
    bottom: 0;
    top: 0;

    left: calc(#{mvar("sidebar.w")} * -1);

    &.opened {
      transition: left 0.3s ease;
      left: 0;

      & + .container {
        left: calc(#{mvar("sidebar.w")} * -1);
        transition: left 0.3s ease;
      }
    }
  }
}
