.btn {
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  width: 100%;
  text-align: left;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 20px var(--Spacing-x-one-and-half) 0;
}

.body {
  opacity: 0.8;
}

.hideWrapper {
  background-color: var(--Main-Grey-White);
  display: none;
}

.container[data-isopen="true"] .hideWrapper {
  display: block;
}

@media screen and (max-width: 1366px) {
  .container {
    z-index: 10001;
    height: 24px;
  }

  .hideWrapper {
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 100%;
    transition: top 300ms ease;
    z-index: 10001;
  }

  .container[data-isopen="true"] .hideWrapper {
    border-radius: var(--Corner-radius-Large) var(--Corner-radius-Large) 0 0;
    top: 20px;
  }
}

@media screen and (min-width: 1367px) {
  .hideWrapper {
    border-radius: var(--Corner-radius-Large);
    box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);
    padding: var(--Spacing-x2) var(--Spacing-x3);
    position: absolute;
    /** 
      BookingWidget padding + 
      border-width + 
      wanted space below booking widget
     */
    top: calc(100% + var(--Spacing-x1) + 1px + var(--Spacing-x4));
  }
}