app-bottom-sheet {
  ion-backdrop {
    opacity: 0.4;
  }

  div.container {
    position: absolute;
    left: 0;

    @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-toolbaroffset) - 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-toolbaroffset) - var(--bottom-sheet-top));
    }

    background: var(--ion-background-color, white);
    width: 100%;

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

    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;
    }

    div.indicator {
      position: absolute;
      top: 8px;
      left: 50%;
      transform: translate(0, -50%);
      width: 16px;
      height: 4px;
      background: rgba(var(--ion-color-medium-rgb), 0.8);
      border-radius: 16px;
    }
  }
}
