import { css } from "lit";
const compentStyle = css`
          * {
            -webkit-tap-highlight-color: transparent;
          }

* {
  box-sizing: border-box;
}

.wrapper {
  display: flex;
  user-select: none;
  width: var(--global-size-spacing-column-width);
  flex-direction: column;
  align-items: flex-start;
  border-radius: var(--app-components-system-menu-border-radius);
  background: var(--container-global-color);
  box-shadow: var(--shadow-floating);
  overflow: hidden;
}

.wrapper .group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

:is(.wrapper .group):not(:last-child) {
      border-bottom: 1px solid var(--border-divider-color);
    }

.wrapper.condensed .content-container {
    padding-top: var(--app-components-system-menu-padding-vertical);
    padding-right: 0;
  }

:is(.wrapper button.title-container) {
            border-color: var(--flat-enabled-border-color);
            background-color: var(--flat-enabled-background-color);
            border-width: 1px;
            border-style: solid;
            cursor: pointer;
            --base-border-color: var(--flat-enabled-border-color);
            --base-background-color: var(--flat-enabled-background-color);
}

:is(.wrapper button.title-container):focus {
            outline: none;
}

.activated:is(.wrapper button.title-container) {
            border-color: var(--flat-activated-border-color);
            background-color: var(--flat-activated-background-color);
            --base-border-color: var(--flat-activated-border-color);
            --base-background-color: var(--flat-activated-background-color);
}

@media (hover:hover) {

:is(.wrapper button.title-container):hover {
                        border-color: color-mix(in srgb, var(--flat-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
                        background-color: color-mix(in srgb, var(--flat-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
            }
}

:is(.wrapper button.title-container):active {
            border-color: var(--flat-pressed-border-color);
            background-color: var(--flat-pressed-background-color);
}

:is(.wrapper button.title-container):focus-visible {
            outline-color: var(--border-focus-color);
            outline-width: var(--global-size-spacing-border-weight-focusframe);
            outline-style: solid;
            border-color: var(--container-global-color);
            z-index: 1;
}

:is(.wrapper button.title-container):disabled {
            border-color: var(--flat-disabled-border-color);
            background-color: var(--flat-disabled-background-color);
            cursor: not-allowed;
            color: var(--on-flat-disabled-color) !important;
}

.disabled:is(.wrapper button.title-container) {
            border-color: var(--flat-disabled-border-color);
            background-color: var(--flat-disabled-background-color);
            cursor: not-allowed;
            color: var(--on-flat-disabled-color) !important;
}

.wrapper button.title-container {
    appearance: none;
    border: none;
    background: none;
  }

.wrapper .title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    color: var(--element-neutral-color);
    font-family: var(--font-family-main);
    font-weight: var(--font-weight-semibold);
    font-size: var(--global-typography-ui-overline-font-size);
    line-height: var(--global-typography-ui-overline-line-height);
    letter-spacing: var(--global-typography-ui-overline-letter-spacing);
    font-feature-settings:
    "liga" off,
    "clig" off,
    "ss04" on;
    padding-left: var(--app-components-system-menu-margin-horizontal);
    min-height: var(--app-components-system-menu-touch-target-size);
  }

.sub-menu-title:is(.wrapper .title-container) {
      justify-content: flex-start;
      padding: var(--app-components-system-menu-margin-horizontal)
        var(--app-components-system-menu-margin-horizontal)
        var(--app-components-system-menu-padding-vertical)
        var(--app-components-system-menu-margin-horizontal);
    }

:is(.wrapper .title-container) .title {
      padding: 0 var(--app-components-system-button-label-spacing);
    }

:is(.wrapper .title-container) .icon-container {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: var(--global-size-spacing-touch-target-min);
    }

:is(:is(.wrapper .title-container) .icon-container) .icon {
        width: var(--ui-components-icon-button-icon-size);
        height: var(--global-size-spacing-icon-icon-size-regular);
      }

.settings:is(.wrapper .title-container) {
      justify-content: flex-start;
      font-family: var(--font-family-main);
      font-weight: var(--global-typography-ui-body-font-weight);
      font-size: var(--global-typography-ui-body-font-size);
      line-height: var(--global-typography-ui-body-line-height);
      font-feature-settings:
    "liga" off,
    "clig" off,
    "ss04" on;
      padding: var(--app-components-user-menu-padding-vertical)
        var(--app-components-user-menu-margin-horizontal);
    }

.settings:is(.wrapper .title-container) .icon-container {
        min-width: unset;
        padding-left: var(
          --menu-navigation-components-navigation-item-padding-horizontal
        );
      }

.settings:is(.wrapper .title-container) .icon {
        width: var(--menu-navigation-components-navigation-item-icon-size);
        height: var(--menu-navigation-components-navigation-item-icon-size);
        color: var(--element-neutral-color);
      }

.settings:is(.wrapper .title-container) .title {
        min-height: var(--global-size-spacing-touch-target-min);
        display: flex;
        align-items: center;
        justify-content: flex-start;
      }

.wrapper .content-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 0 var(--app-components-system-menu-margin-horizontal)
      var(--app-components-system-menu-padding-vertical)
      var(--app-components-system-menu-margin-horizontal);
  }

:is(.wrapper .content-container) .action-container {
      display: flex;
      align-items: center;
      flex: 1 0 0;
      padding: 0 var(--app-components-system-menu-padding-horizontal);
    }

:is(.wrapper .content-container) .content-item-btn {
      min-height: var(--ui-components-icon-button-touch-target-size);
    }

:is(.wrapper .content-container) .content-item-value {
      padding: 0 var(--app-components-system-menu-spacing-large);
      font-family: var(--font-family-main);
      font-weight: var(--font-weight-bold);
      font-size: var(--global-typography-ui-body-active-font-size);
      line-height: var(--global-typography-ui-body-active-line-height);
      font-feature-settings:
    "liga" off,
    "clig" off,
    "ss04" on;
      color: var(--element-active-color);
      flex-grow: 1;
    }

.disabled:is(:is(.wrapper .content-container) .content-item-value) {
        color: var(--element-neutral-color);
        font-family: var(--font-family-main);
        font-weight: var(--global-typography-ui-body-font-weight);
        font-size: var(--global-typography-ui-body-font-size);
        line-height: var(--global-typography-ui-body-line-height);
        font-feature-settings:
    "liga" off,
    "clig" off,
    "ss04" on;
      }

:is(.wrapper .content-container) .content-item-slider {
      flex-grow: 1;
    }

.battery-container:is(.wrapper .content-container) {
      justify-content: space-between;
    }

:is(.wrapper .content-container) .battery {
      color: var(--element-active-color);
      display: flex;
      padding: var(--app-components-system-menu-padding-vertical) 0;
      align-items: center;
      justify-content: flex-start;
      gap: var(--app-components-system-menu-spacing);
    }

:is(:is(.wrapper .content-container) .battery) obc-battery-icon {
        width: var(--global-size-spacing-icon-icon-size-regular);
        height: var(--global-size-spacing-icon-icon-size-regular);
        color: var(--element-neutral-color);
      }

:is(:is(.wrapper .content-container) .battery) .percentage {
        font-family: var(--font-family-main);
        font-weight: var(--font-weight-bold);
        font-size: var(--global-typography-ui-body-active-font-size);
        line-height: var(--global-typography-ui-body-active-line-height);
        font-feature-settings:
    "liga" off,
    "clig" off,
    "ss04" on;
      }

:is(:is(.wrapper .content-container) .battery) .status {
        font-family: var(--font-family-main);
        font-weight: var(--global-typography-ui-body-font-weight);
        font-size: var(--global-typography-ui-body-font-size);
        line-height: var(--global-typography-ui-body-line-height);
        font-feature-settings:
    "liga" off,
    "clig" off,
    "ss04" on;
      }

.wrapper.small-screen {
    width: var(--global-size-spacing-column-width);
    height: calc(var(--global-size-spacing-column-width) * 375 / 320);
  }

.wrapper.small-screen .small-screen-content {
      flex: 1;
      width: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      display: flex;
      flex-direction: column;
    }

.wrapper.small-screen .small-screen-header {
      display: flex;
      flex-direction: column;
      padding: 0 var(--app-components-system-menu-margin-horizontal)
        var(--app-components-system-menu-padding-vertical);
    }

.wrapper.small-screen .small-screen-title-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: var(--app-components-system-menu-touch-target-size);
      padding: 0 var(--app-components-system-menu-padding-horizontal);
      font-family: var(--font-family-main);
      font-weight: var(--font-weight-semibold);
      font-size: var(--global-typography-ui-overline-font-size);
      line-height: var(--global-typography-ui-overline-line-height);
      letter-spacing: var(--global-typography-ui-overline-letter-spacing);
      font-feature-settings:
    "liga" off,
    "clig" off,
    "ss04" on;
      color: var(--element-neutral-color);
    }

:is(.wrapper.small-screen .small-screen-title-row) obc-toggle-switch {
        flex-grow: 0;
      }

.wrapper.small-screen .small-screen-controls-row {
      display: flex;
      align-items: center;
      gap: var(--app-components-system-menu-spacing);
      min-height: var(--app-components-system-menu-touch-target-size);
      padding: 0 var(--app-components-system-menu-padding-horizontal);
    }

:is(.wrapper.small-screen .small-screen-controls-row) .small-screen-audio-output {
        flex-grow: 1;
      }

.wrapper.small-screen .small-screen-slider-container {
      display: flex;
      align-items: center;
      flex-grow: 1;
      gap: 0;
    }

:is(.wrapper.small-screen .small-screen-slider-container) .small-screen-slider {
        flex-grow: 1;
        margin-right: -10px;
      }

.wrapper.small-screen .small-screen-volume-label {
      font-family: var(--font-family-main);
      font-weight: var(--global-typography-ui-button-font-weight);
      font-size: var(--global-typography-ui-button-font-size);
      line-height: var(--global-typography-ui-button-line-height);
      font-feature-settings:
    "liga" off,
    "clig" off,
    "ss04" on;
      color: var(--element-active-color);
      width: 40px;
      flex-shrink: 0;
      text-align: right;
    }

.wrapper.small-screen .small-screen-battery-info {
      display: flex;
      align-items: center;
      gap: var(--app-components-system-menu-spacing);
      font-family: var(--font-family-main);
      font-weight: var(--font-weight-bold);
      font-size: var(--global-typography-ui-body-active-font-size);
      line-height: var(--global-typography-ui-body-active-line-height);
      font-feature-settings:
    "liga" off,
    "clig" off,
    "ss04" on;
      color: var(--element-active-color);
    }

:is(.wrapper.small-screen .small-screen-battery-info) obc-battery-icon {
        width: var(--global-size-spacing-icon-icon-size-regular);
        height: var(--global-size-spacing-icon-icon-size-regular);
        color: var(--instrument-enhanced-secondary-color);
      }

.wrapper.small-screen .small-screen-battery-level {
      font-family: var(--font-family-main);
      font-weight: var(--font-weight-bold);
      font-size: var(--global-typography-ui-body-active-font-size);
      line-height: var(--global-typography-ui-body-active-line-height);
      font-feature-settings:
    "liga" off,
    "clig" off,
    "ss04" on;
      color: var(--element-active-color);
    }

.wrapper.small-screen .small-screen-toggle-row {
      display: flex;
      align-items: center;
      padding: 0 var(--app-components-system-menu-padding-horizontal);
    }

:is(.wrapper.small-screen .small-screen-toggle-row) obc-toggle-switch {
        width: 100%;
      }

.wrapper.small-screen .small-screen-button-row {
      display: flex;
      align-items: center;
      padding: 0 var(--app-components-system-menu-padding-horizontal);
    }

:is(.wrapper.small-screen .small-screen-button-row) obc-button {
        flex-grow: 1;
      }

.wrapper.small-screen .small-screen-divider {
      width: 100%;
      height: 1px;
      background: var(--border-divider-color);
      flex-shrink: 0;
    }

.wrapper.small-screen .small-screen-options {
      flex: 1;
      overflow: hidden;
    }

.wrapper.small-screen .small-screen-options-content {
      padding: var(--app-components-system-menu-padding-vertical)
        var(--app-components-system-menu-margin-horizontal)
        var(--app-components-system-menu-padding-vertical)
        var(--app-components-system-menu-margin-horizontal);
    }

:is(.wrapper.small-screen .small-screen-options-content) obc-radio {
        width: 100%;
      }

.wrapper.small-screen obc-scrollbar[overflowing] .small-screen-options-content {
      padding-right: 0;
    }

.wrapper.small-screen .menu-bar {
      display: flex;
      align-items: center;
      width: 100%;
      min-height: var(--menu-navigation-components-tab-item-touch-target-size);
      flex-shrink: 0;
      border-top: 1px solid var(--border-divider-color);
      background: var(--container-section-color);
    }

:is(:is(.wrapper.small-screen .menu-bar) button) {
            border-color: var(--flat-enabled-border-color);
            background-color: var(--flat-enabled-background-color);
            border-width: 1px;
            border-style: solid;
            cursor: pointer;
            --base-border-color: var(--flat-enabled-border-color);
            --base-background-color: var(--flat-enabled-background-color);
}

:is(:is(.wrapper.small-screen .menu-bar) button):focus {
            outline: none;
}

.activated:is(:is(.wrapper.small-screen .menu-bar) button) {
            border-color: var(--flat-activated-border-color);
            background-color: var(--flat-activated-background-color);
            --base-border-color: var(--flat-activated-border-color);
            --base-background-color: var(--flat-activated-background-color);
}

@media (hover:hover) {

:is(:is(.wrapper.small-screen .menu-bar) button):hover {
                        border-color: color-mix(in srgb, var(--flat-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
                        background-color: color-mix(in srgb, var(--flat-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
            }
}

:is(:is(.wrapper.small-screen .menu-bar) button):active {
            border-color: var(--flat-pressed-border-color);
            background-color: var(--flat-pressed-background-color);
}

:is(:is(.wrapper.small-screen .menu-bar) button):focus-visible {
            outline-color: var(--border-focus-color);
            outline-width: var(--global-size-spacing-border-weight-focusframe);
            outline-style: solid;
            border-color: var(--container-global-color);
            z-index: 1;
}

:is(:is(.wrapper.small-screen .menu-bar) button):disabled {
            border-color: var(--flat-disabled-border-color);
            background-color: var(--flat-disabled-background-color);
            cursor: not-allowed;
            color: var(--on-flat-disabled-color) !important;
}

.disabled:is(:is(.wrapper.small-screen .menu-bar) button) {
            border-color: var(--flat-disabled-border-color);
            background-color: var(--flat-disabled-background-color);
            cursor: not-allowed;
            color: var(--on-flat-disabled-color) !important;
}

:is(.wrapper.small-screen .menu-bar) button {
        appearance: none;
        border: none;
        border-left: 1px solid transparent;
        border-right: 1px solid transparent;
        background: transparent;
        flex: 1;
        height: 100%;
        min-height: var(
          --menu-navigation-components-tab-item-touch-target-size
        );
        min-width: var(--menu-navigation-components-tab-item-touch-target-size);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--element-neutral-color);
        cursor: pointer;
        padding: 0 var(--menu-navigation-components-tab-item-padding-horizontal);
      }

.active:is(:is(.wrapper.small-screen .menu-bar) button) {
          background: var(--container-global-color);
          border-left-color: var(--border-divider-color);
          border-right-color: var(--border-divider-color);
          color: var(--instrument-enhanced-secondary-color);
        }

:is(:is(.wrapper.small-screen .menu-bar) button) .tab-icon {
          width: var(--menu-navigation-components-tab-item-icon-size);
          height: var(--menu-navigation-components-tab-item-icon-size);
        }

.sub-container {
  display: flex;
  padding: var(--app-components-system-menu-padding-vertical)
    var(--app-components-system-menu-margin-horizontal);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--app-components-system-menu-spacing);
  width: 100%;
}

.sub-container:not(:last-child) {
    border-bottom: 1px solid var(--border-divider-color);
  }

.sub-container.sub-container-title {
    border-bottom: none;
    padding: var(--app-components-system-menu-margin-vertical)
      var(--app-components-system-menu-margin-horizontal)
      var(--app-components-system-menu-padding-vertical)
      var(--app-components-system-menu-margin-horizontal);
  }

.sub-container.sub-container-title .title2 {
      font-family: var(--font-family-main);
      font-weight: var(--font-weight-semibold);
      font-size: var(--global-typography-ui-overline-font-size);
      line-height: var(--global-typography-ui-overline-line-height);
      letter-spacing: var(--global-typography-ui-overline-letter-spacing);
      font-feature-settings:
    "liga" off,
    "clig" off,
    "ss04" on;
      color: var(--element-neutral-color);
    }

.sub-container .row {
    display: flex;
    padding: 0 var(--app-components-system-menu-padding-horizontal);
    align-items: center;
    gap: var(--app-components-system-menu-spacing);
    width: 100%;
  }

.no-padding:is(.sub-container .row) {
      padding: 0;
    }

:is(.sub-container .row) obc-toggle-switch,:is(.sub-container .row) obc-button {
      flex-grow: 1;
      flex-basis: 0;
    }

.wifi-container:is(.sub-container .row) {
      display: grid;
      grid-template-columns: auto 1fr;
      column-gap: var(--app-components-system-menu-spacing-large);
      row-gap: 0;
      justify-content: flex-start;
      grid-template-areas:
        "icon name"
        "icon status";
    }

.wifi-container:is(.sub-container .row) .icon {
        grid-area: icon;
      }

.wifi-container:is(.sub-container .row) .wifi-name {
        grid-area: name;
        font-family: var(--font-family-main);
        font-weight: var(--font-weight-bold);
        font-size: var(--global-typography-ui-body-active-font-size);
        line-height: var(--global-typography-ui-body-active-line-height);
        font-feature-settings:
    "liga" off,
    "clig" off,
    "ss04" on;
      }

.wifi-container:is(.sub-container .row) .wifi-status {
        grid-area: status;
        font-family: var(--font-family-main);
        font-weight: var(--font-weight-regular);
        font-size: var(--global-typography-ui-label-font-size);
        line-height: var(--global-typography-ui-label-line-height);
        font-feature-settings:
    "liga" off,
    "clig" off,
    "ss04" on;
      }

.radio:is(.sub-container .row) {
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
      padding-left: 0;
    }

.radio:is(.sub-container .row) obc-radio {
        width: 100%;
      }

.navigation-items:is(.sub-container .row) {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      padding: 0;
    }

:is(.sub-container .row) .icon {
      width: var(--app-components-dimming-menu-icon-size);
      height: var(--app-components-dimming-menu-icon-size);
      color: var(--instrument-enhanced-secondary-color);
    }

:is(.sub-container .row) obc-slider {
      flex-grow: 1;
    }

:is(.sub-container .row) .title {
      font-family: var(--global-typography-font-family);
      font-weight: var(
    --global-typography-instrument-value-large-font-weight-active
  );
      font-size: var(--global-typography-instrument-value-large-font-size);
      line-height: var(--global-typography-instrument-value-large-line-height);
      letter-spacing: var(
    --global-typography-instrument-value-large-letter-spacing
  );
      font-feature-settings:
    "liga" off,
    "clig" off,
    "ss04" on;
      display: flex;
      color: var(--element-active-color);
      align-items: baseline;
    }

:is(:is(.sub-container .row) .title) .unit {
        font-family: var(--global-typography-font-family);
        font-weight: var(--global-typography-instrument-label-font-weight);
        font-size: var(--global-typography-instrument-label-font-size);
        line-height: var(--global-typography-instrument-label-line-height);
        font-feature-settings:
    "liga" off,
    "clig" off,
    "ss04" on;
        color: var(--element-neutral-color);
      }
`;
export {
  compentStyle as default
};
//# sourceMappingURL=system-menu.css.js.map
