@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/addons/_spacing-utilities.less";
@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";

.np-drawer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100vw;
  max-width: 600px;
  @media (max-width: 770px) {
    max-width: unset;
  }
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;

  .np-drawer-header {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    min-height: var(--size-56);
    padding: var(--size-24) var(--size-16);

    .np-theme-personal & {
      padding: var(--size-24);
      @media (--screen-400-zoom) {
        padding: var(--size-16);
      }

      .np-close-button {
        @close-btn-margin: calc(var(--size-8) * -1);

        margin-top: @close-btn-margin;
        margin-right: @close-btn-margin;
        margin-bottom: @close-btn-margin;
      }
    }

    &.np-drawer-header--withborder {
      box-shadow: inset 0 -1px 0 0 rgb(226 230 232);

      .np-theme-personal & {
        box-shadow: inset 0 -1px 0 0 var(--color-border-neutral);
      }
    }

    .np-text-title-body {
      margin-right: var(--size-16);
      font-size: var(--font-size-18);
      letter-spacing: var(--letter-spacing-negative-xs);
      line-height: var(--line-height-24);
    }

    .np-close-button {
      margin-left: auto;
    }

    .tw-icon {
      display: block;
      cursor: pointer;
      fill: rgb(0 185 255);
    }
  }

  .np-drawer-content {
    overflow-y: auto;
    flex: 1;

    .np-theme-personal {
      background-color: transparent;
    }
  }

  .np-drawer-footer,
  .np-drawer-content {
    padding: var(--size-16);
  }

  .np-drawer-footer {
    box-shadow: inset 0 1px 0 0 rgb(226 230 232);

    .np-theme-personal & {
      box-shadow: inset 0 1px 0 0 var(--color-border-neutral);
    }
  }
}

@media (--screen-md) {
  .np-drawer {
    .np-drawer-header {
      padding: var(--size-32) var(--size-24);

      .np-theme-personal & {
        padding: var(--size-24);
      }
    }

    .np-drawer-footer,
    .np-drawer-content {
      padding: var(--size-24);
    }
  }
}
