@use "variables";

$fwe-sidebar-overlay-width: 480px;

.fwe-sidebar-overlay {
  z-index: variables.$zindex-sticky;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
  padding: 32px;
  position: fixed;
  right: 0px;
  top: 0px;
  bottom: 0px;
  width: $fwe-sidebar-overlay-width;
  background: variables.$white;
  transform: translateX($fwe-sidebar-overlay-width);
  transition: opacity 400ms, transform 400ms;
  opacity: 0;
  pointer-events: none;
  &--open {
    pointer-events: unset;
    display: block;
    opacity: 1;
    transform: translateX(0px);
  }
  &-close-btn {
    float: inherit;
    display: block;
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0 0 0 auto;
    border: none;
    outline: none;
    text-align: right;
    cursor: pointer;
    background: variables.$text;
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjExIC0xODMpIj48cGF0aCBkPSJNMCwwSDI0VjI0SDBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMTEgMTgzKSIgZmlsbD0ibm9uZSIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIxNSAxODcpIj48cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMTIuOTUsNC40NjQsMTEuNTM2LDMuMDUsOCw2LjU4Niw0LjQ2NCwzLjA1LDMuMDUsNC40NjQsNi41ODYsOCwzLjA1LDExLjUzNiw0LjQ2NCwxMi45NSw4LDkuNDE0bDMuNTM2LDMuNTM2LDEuNDE0LTEuNDE0TDkuNDE0LDhaIiBmaWxsPSIjMzMzIi8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIxNSAxODcpIj48cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMTIuOTUsNC40NjQsMTEuNTM2LDMuMDUsOCw2LjU4Niw0LjQ2NCwzLjA1LDMuMDUsNC40NjQsNi41ODYsOCwzLjA1LDExLjUzNiw0LjQ2NCwxMi45NSw4LDkuNDE0bDMuNTM2LDMuNTM2LDEuNDE0LTEuNDE0TDkuNDE0LDhaIiBmaWxsPSIjMzMzIi8+PC9nPjwvZz48L3N2Zz4=");
    &:hover {
      background: variables.$hero;
    }
  }
  @media (max-width: variables.$breakpoint-xs-min) {
    padding: 16px;
    left: 0px;
    width: unset;
    transform: none;
    &:not(&--open) {
      display: none;
    }
  }
}