@import (reference) "../../styles/less/mixins/_theming.less";

.np-bottom-sheet {
  border-radius: 10px 10px 0 0;

  &--top-bar {
    cursor: grab;
    padding: var(--size-8) 0 calc(var(--size-16) + var(--size-4));
    display: flex;
    flex-direction: column;
    align-items: center;

    &--shadow {
      box-shadow: 0 4px 40px rgba(34, 48, 73, 0.2);

      .remove-dark-themes-box-shadows();
    }
  }

  &--handler {
    width: 40px;
    height: 4px;
    background: var(--color-interactive-secondary);
    border-radius: var(--radius-small);
  }

  &--close-btn {
    position: absolute;
    right: var(--size-8);
  }

  &--content {
    overflow-y: auto;
    // adding extra padding at the bottom for Home Indicator on iPhone X
    // https://webkit.org/blog/7929/designing-websites-for-iphone-x/
    padding: 0 var(--space-content-horizontal);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .np-theme-personal & {
    &--top-bar--shadow {
      box-shadow: 0 4px 40px rgb(69 71 69 / 20%);
    }
  }

  .np-theme-personal & {
    border-radius: var(--radius-xlarge, 32px) var(--radius-xlarge, 32px) 0 0;

    margin: 0px var(--size-8);
    // had to use !important to override the width specified on 
    // the '.sliding-panel.sliding-panel--open-bottom' class
    width: calc(100% - var(--size-16)) !important;

    &--content {
      padding: 0 var(--size-16) var(--size-16);
    }
  }
}