/* =========================================================
   OptiWake — przyciski LIVE na desktopie
   ========================================================= */

@media (min-width: 821px) {
  :root {
    --ow-live-blue: #0057b8;
    --ow-live-navy: #0b1d3a;
    --ow-live-turquoise: #00d4c6;

    --ow-live-blue-soft: #eaf4fc;
    --ow-live-turquoise-soft: #e4fbf8;
    --ow-live-red-soft: #fcebea;
    --ow-live-red: #a93630;

    --ow-live-border: #d5e2eb;
  }

  /*
   * Wspólny wygląd przycisków sekcji LIVE.
   */

  [data-view-panel="live"]
  .live-action-button,

  #app-sidebar
  .training-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;

    padding: 0 16px !important;
    margin: 0 !important;

    border: 1px solid var(--ow-live-border) !important;
    border-radius: 11px !important;

    background: #ffffff !important;
    color: var(--ow-live-navy) !important;

    box-shadow: none !important;

    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0.2px !important;

    animation: none !important;
    transform: none !important;

    box-sizing: border-box !important;
  }

  /*
   * Bez poruszania przycisków.
   */

  [data-view-panel="live"]
  .live-action-button:hover,

  [data-view-panel="live"]
  .live-action-button:active,

  #app-sidebar
  .training-button:hover,

  #app-sidebar
  .training-button:active {
    transform: none !important;
  }

  /*
   * Rozpoczęcie treningu lub symulatora.
   */

  [data-view-panel="live"]
  .live-action-button.start,

  #training-start {
    border-color:
      rgba(0, 212, 198, 0.42) !important;

    background:
      var(--ow-live-turquoise-soft) !important;

    color: #08726b !important;
  }

  [data-view-panel="live"]
  .live-action-button.start:hover,

  #training-start:hover:not(:disabled) {
    background: #d4f7f3 !important;
  }

  /*
   * Zatrzymanie.
   */

  [data-view-panel="live"]
  .live-action-button.stop,

  #training-finish {
    border-color: #efc4c1 !important;
    background: var(--ow-live-red-soft) !important;
    color: var(--ow-live-red) !important;
  }

  [data-view-panel="live"]
  .live-action-button.stop:hover:not(:disabled),

  #training-finish:hover:not(:disabled) {
    background: #f8deda !important;
  }

  /*
   * Przejście do Race Lab.
   */

  [data-view-panel="live"]
  .live-action-button.lab,

  [data-view-panel="live"]
  .live-action-button.race-lab {
    border-color:
      rgba(0, 87, 184, 0.26) !important;

    background: var(--ow-live-blue-soft) !important;
    color: var(--ow-live-blue) !important;
  }

  [data-view-panel="live"]
  .live-action-button.lab:hover,

  [data-view-panel="live"]
  .live-action-button.race-lab:hover {
    background: #dceefa !important;
  }

  /*
   * Utworzenie nowego treningu.
   */

  #training-create {
    border-color:
      rgba(0, 87, 184, 0.24) !important;

    background: #ffffff !important;
    color: var(--ow-live-blue) !important;
  }

  #training-create:hover:not(:disabled) {
    background: var(--ow-live-blue-soft) !important;
  }

  /*
   * Wyłączone przyciski.
   */

  [data-view-panel="live"]
  .live-action-button:disabled,

  #app-sidebar
  .training-button:disabled {
    border-color: #dde5eb !important;
    background: #edf2f5 !important;
    color: #8a9aa7 !important;

    opacity: 1 !important;
    cursor: not-allowed !important;
  }

  /*
   * Równe odstępy między przyciskami.
   */

  [data-view-panel="live"]
  .live-actions,

  [data-view-panel="live"]
  .live-control-actions,

  #app-sidebar
  .training-actions {
    display: grid !important;
    gap: 9px !important;
  }
}