@import "../constants/index.scss";

.hsl {
  * {
    font-family: "Roboto", sans-serif;
    -webkit-font-smoothing: antialiased;
    min-height: 0;
    min-width: 0;
  }

  margin-bottom: 10px;
  max-width: 100%;
}

:global {
  .input-margin {
    margin-bottom: 16px;
  }

  .accordion-padding-body {
    padding: 12px;
  }

  .drawer-body-overflow {
    flex: 1;
    overflow-y: auto;
  }
}

.popoutHSL {
  position: fixed;
  z-index: $z-index + 10;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2));
  top: 50%;
  left: calc(50% - #{$drawer-width});
  transform: translate3d(calc(-50% + #{$drawer-width/2}), -45%, 0);
  animation: show-in 0.5s cubic-bezier(0.175, 0.5, 0.12, 1);
  animation-fill-mode: forwards;
}

:global {
  @keyframes show-in {
    0% {
      opacity: 0;
      transform: translate3d(calc(-50% + #{$drawer-width/2}), -45%, 0);
    }
    100% {
      opacity: 1;
      transform: translate3d(calc(-50% + #{$drawer-width/2}), -50%, 0);
    }
  }
}