$sb-style-root: '@schlechtenburg/style';
@import '@schlechtenburg/style/scss/montserrat.scss';

.sb-main {
  position: relative;
  color: var(--fg);
  background-color: var(--bg);
  padding: 0;
  transition: padding 0.2s ease;
  overflow: hidden;

  --grey-0: white;
  --grey-1-t: rgba(0, 0, 0, 0.05);
  --grey-1: rgb(242, 242, 242);
  --grey-2-t: rgba(0, 0, 0, 0.1);
  --grey-2: rgb(230, 230, 230);
  --grey-3-t: rgba(0, 0, 0, 0.2);
  --grey-3: rgb(205, 205, 205);
  --grey-4-t: rgba(0, 0, 0, 0.4);
  --grey-4: rgb(155, 155, 155);
  --grey-5-t: rgba(0, 0, 0, 0.7);
  --grey-5: rgb(75, 75, 75);
  --black: rgba(0, 0, 0, 0.9);

  --bg: var(--grey-1);
  --fg: var(--black);

  --interact: #3f9cff;
  --interact-lite: #3f9cff;

  --z-toolbar: 2000;
  --z-context-menu: 3000;
  --z-tree-block-select: 4000;
  --z-main-menu: 5000;
  --z-modal: 10000;

  *,
  *::before,
  *::after {
    box-sizing: border-box; 
  }

  &_edit {
    padding: 0rem 3rem 3rem 3rem;
  }

  &--menu {
    opacity: 1;
    margin-bottom: 3rem;
    transform: none;

    &-enter-active,
    &-leave-active {
      transition-property: opacity, margin-bottom, transform;
      transition-duration: 0.1s;
      transition-timing-function: ease;
    }

    &-enter-active {
      transition-delay: 0s 0s 0.1s;
    }

    &-enter-from,
    &-leave-to {
      opacity: 0;
      margin-bottom: 0;
      transform: translateY(-100%);
    }
  }
}