.action-bar {
  @apply fixed bottom-[100px] h-[70px] p-1.5 rounded-md overflow-y-hidden overflow-x-auto
  bg-[var(--ls-secondary-background-color)] z-[99999];

  box-shadow: /* bottom = shadow-lg */ 0 10px 15px -3px rgba(0, 0, 0, 0.1),
  0 4px 6px -4px rgba(0, 0, 0, 0.1),
    /* top = lighter (closer to shadow-md) */ 0 -6px 10px -4px rgba(0, 0, 0, 0.08),
  0 -2px 4px -4px rgba(0, 0, 0, 0.08);

  .action-bar-commands {
    @apply relative flex w-full;


    .ti, .tie {
      @apply text-[var(--ls-primary-text-color)] text-[23px] opacity-90;
    }

    .description {
      @apply text-[var(--ls-primary-text-color)] text-[10px] opacity-100;
    }

    button {
      @apply flex-1 flex flex-col items-center justify-center py-3 px-1
      opacity-80 active:opacity-100;
    }
  }
}

html.is-native-ipad {
  .action-bar {
    @apply w-[70%] min-w-[550px];

    @media (orientation: landscape) {
      @apply w-1/2;
    }
  }
}

html.is-native-iphone {
  .action-bar {
    left: 3%;
    right: 3%;
  }

  @media (orientation: landscape) {
    .cp__footer {
      height: 45px;
    }

    .action-bar {
      bottom: 50px;
      left: 15%;
      right: 15%;
      width: 70%;
      min-width: 450px;
    }
  }
}

html.is-native-iphone-without-notch,
html.is-native-android {
  .cp__footer {
    height: 45px;
  }

  .action-bar {
    left: 5%;
    right: 5%;
  }

  @media (orientation: landscape) {

    .action-bar {
      bottom: 50px;
      left: 15%;
      right: 15%;
      width: 70%;
    }
  }

  .cp__sidebar-left-layout {
    bottom: 0;
  }
}

html.is-zoomed-native-ios {
  .cp__footer {
    height: 70px;
  }

  @media (orientation: landscape) {
    .cp__footer {
      height: 50px;
    }
  }
}

.cp__graph-picker {
  button.toggle-item {
    opacity: .5;
    background: transparent !important;
    -webkit-tap-highlight-color: transparent;

    &:hover {
      color: inherit;
      opacity: .5;
    }

    &.is-on {
      @apply opacity-100;
    }
  }
}

html.has-mobile-keyboard {
  .ui__dialog-overlay {
    &:has(.app-login-modal) {
      @apply overflow-y-auto;
    }
  }

  .ui__dialog-content {
    &.app-login-modal {
      margin-bottom: 460px;
    }
  }
}

.ui__dialog-content[label=user-login] {
  @apply rounded-lg pb-3;
}
