digitransit-ui/app/component/bubble-dialog.scss

$bubble-dialog-box-shadow: 1.5px 2.6px 10px 0 rgba(0, 0, 0, 0.2);
$bubble-dialog-font-size--fullscreen: 1.5rem;

.bubble-dialog-component-container {
  position: relative;
  z-index: auto;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  margin: 0 0 8px 8px;

  .bubble-dialog-container {
    bottom: 2.5em;
    max-width: calc(100vw - 2em);
    position: absolute;
    z-index: index($zindex, front);

    &.bubble-dialog-container--fullscreen {
      bottom: auto;
      display: flex;
      height: 100%;
      max-width: none;
      position: static;
    }

    .bubble-dialog {
      position: relative;
      right: 190px;
      min-width: 240px;
      background-color: $white;
      border-radius: $border-radius-bigger;
      box-shadow: $bubble-dialog-box-shadow;
      padding: 0.5em;

      &.bubble-dialog--fullscreen {
        border-radius: 0;
        box-shadow: none;
        display: flex;
        flex: 1 100%;
        flex-direction: column;
        margin: 0;
        padding: 0;
      }

      &.bubble-dialog--large {
        max-height: calc(100vh - 150px);
        overflow-y: auto;
        padding: 1em;
      }

      &.bubble-dialog--tooltip {
        display: flex;
        flex-direction: row;
        right: 16em;
        width: 19em;
        max-width: calc(100vw - 5.5em);
      }

      .bubble-dialog-close {
        align-self: start;
        background-color: transparent;
        color: $primary-color;
        height: 1em;
        margin: 0.25em;
        padding: 0;
        width: 1em;

        &.bubble-dialog-close--fullscreen {
          font-size: $bubble-dialog-font-size--fullscreen;
        }
      }

      .bubble-dialog-header-container {
        align-items: center;
        display: flex;
        justify-content: space-between;
        min-height: 2.5em;

        &.bubble-dialog-header-container--fullscreen {
          background-color: $background-color-lighter;
          flex-grow: 0;
          flex-shrink: 0;
          padding: 1em;
        }

        .bubble-dialog-header {
          color: $black;
          font-size: 1rem;
          font-weight: $font-weight-medium;
          text-transform: uppercase;
          user-select: none;

          &.bubble-dialog-header--fullscreen {
            font-size: $bubble-dialog-font-size--fullscreen;
            font-weight: $font-weight-medium;
            text-transform: none;
          }
        }
      }

      .bubble-dialog-content {
        color: $black;

        &.bubble-dialog-content--fullscreen {
          flex: 1 1 0px;
          overflow-y: auto;
          padding: 1em 1em 1em 2em;
          position: relative;
        }

        &.bubble-dialog-content--large {
          padding-top: 0.5em;
        }
      }

      .bubble-dialog-buttons {
        margin-top: auto;
        padding: 1em 1em 2em 1em;
        width: 100%;

        .standalone-btn {
          font-size: 1.25rem;
          margin: 0;
          min-height: 40px;
          width: 100%;
        }
      }
    }

    .bubble-dialog-tip-container {
      height: 1rem;
      overflow: hidden;
      width: 2rem;

      .bubble-dialog-tip {
        background-color: white;
        box-shadow: $bubble-dialog-box-shadow;
        height: 1rem;
        margin: -0.5rem auto 0 auto;
        transform: rotate(45deg);
        width: 1rem;
      }
    }
  }

  .bubble-dialog-toggle {
    background-color: $white;
    border-radius: $border-radius;
    cursor: pointer;
    height: 3em;
    padding: 6px;
    width: 3em;
    z-index: index($zindex, map-buttons);
    position: relative;

    .icon {
      color: $primary-color;
      height: auto;
      width: auto;
    }
  }
}