app-bottom-sheet {
  div.container {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);

    @media screen and (max-width: 768px) {
      width: fit-content;
    }

    height: var(--bottom-sheet-top);

    @supports (padding-top: constant(safe-area-inset-bottom)) {
      --safe-area-inset-bottom: constant(safe-area-inset-bottom);
      top: calc(var(--contentheight) - var(--safe-area-inset-bottom) - var(--bottom-sheet-top));
    }

    @supports (padding-top: env(safe-area-inset-bottom)) {
      --safe-area-inset-bottom: env(safe-area-inset-bottom);
      top: calc(var(--contentheight) - var(--safe-area-inset-bottom) - var(--bottom-sheet-top));
    }

    background: rgba(var(--ion-color-dark-rgb), 0.9);

    width: 720px;

    overflow: hidden;

    user-select: none;
    cursor: pointer;

    transition: all 0.4s ease-in-out;

    box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.12);
    border-radius: 10px 10px 0 0;

    z-index: 1000;

    div.content {
      height: fit-content;
      padding-top: 32px;
    }

    > button.sheet-indicator {
      position: absolute;
      top: 0;
      left: 50%;

      padding: 8px;

      outline: none;
      border: none;

      background: transparent;

      > div {
        display: block;

        background: rgba(var(--ion-color-light-rgb), 0.4);
        border-radius: 16px;

        width: 16px;
        height: 4px;
      }
    }
  }
}
