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

* {
  box-sizing: border-box;
}

.card {
  border-radius: 8px;
  background: var(--container-global-color, #fcfcfc);
  /* Shadow/Floating */
  box-shadow: var(--shadow-floating);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  width: 320px;
  border-radius: 12px;
}

.card h3.title,.card .subtitle {
    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);
  }

.card h3.title {
    margin: 0;
    padding-inline: var(--app-components-user-menu-padding-horizontal);
  }

.card .divider {
    height: 1px;
    background: var(--border-divider-color);
  }

.card .title-container,.card .button-container {
    display: flex;
    align-items: center;
    padding: calc(var(--app-components-user-menu-padding-vertical) * 2)
      calc(var(--app-components-user-menu-padding-horizontal) * 2)
      var(--app-components-user-menu-padding-vertical)
      calc(var(--app-components-user-menu-padding-horizontal) * 2);
  }

.card .button-container {
    padding-top: 0;
    gap: var(--ui-components-toggletip-label-spacing);
  }

.card .login-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: var(--app-components-user-menu-padding-vertical)
      calc(var(--app-components-user-menu-padding-horizontal) * 2) 0
      calc(var(--app-components-user-menu-padding-horizontal) * 2);
  }

.card.size-small.type-sign-in .login-container,.card.size-small.type-user-sign-in .login-container {
    padding-bottom: var(--app-components-user-menu-padding-vertical);
  }

.card.size-small.type-user-sign-in .user-profile.horizontal {
    padding-block: calc(
      var(--app-components-user-menu-padding-vertical) * 0.75
    );
  }

.card.size-small.type-signed-in .user-container {
    padding-top: var(--app-components-user-menu-padding-vertical);
  }

.card .login-container obc-input::part(wrapper) {
    padding: 0;
  }

.card .actions-container {
    padding: 0 calc(var(--app-components-user-menu-padding-horizontal) * 2)
      var(--app-components-user-menu-padding-vertical)
      calc(var(--app-components-user-menu-padding-horizontal) * 2);
  }

:is(.card .actions-container) .users {
      display: flex;
      justify-content: space-around;
    }

.card .recent-container.recent > .title-container {
    justify-content: center;
  }

.card .recent-container.recent > .title-container .subtitle {
    font-size: var(--font-size-075);
    line-height: var(--line-height-075);
    text-align: center;
  }

.card .nav-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    padding: var(--app-components-user-menu-padding-vertical)
      calc(var(--app-components-user-menu-padding-horizontal) * 2);
  }

.card .user-profile {
    padding-bottom: var(--app-components-user-menu-padding-vertical);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ui-components-toggletip-label-spacing);
  }

.horizontal:is(.card .user-profile) {
      padding: var(--app-components-user-menu-padding-vertical)
        var(--app-components-user-menu-padding-horizontal)
        var(--app-components-user-menu-padding-vertical)
        calc(var(--app-components-user-menu-padding-horizontal) * 2);
      flex-direction: row;
    }

.horizontal:is(.card .user-profile) obc-user-button {
        --ui-components-user-button-content-direction: row;
      }

.horizontal:is(.card .user-profile) obc-user-button::part(content-container) {
        flex-direction: row;
        gap: var(--app-components-user-menu-label-spacing);
      }

.vertical:is(.card .user-profile) {
      padding-bottom: var(--app-components-user-menu-padding-vertical);
    }

:is(.card .user-profile) .user-avatar {
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 0 0 auto;
      pointer-events: none;
    }

:is(.card .user-profile) obc-user-button::part(label) {
      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);
    }

.card .user-primary {
    padding: 0;
  }

.loading:is(.card .user-primary) {
      padding-block: var(--app-components-user-menu-padding-vertical);
    }

:is(.card .user-primary) obc-user-button::part(label) {
      padding-top: calc(var(--app-components-user-menu-padding-vertical) / 2);
    }

.card obc-button,.card obc-navigation-item {
    width: 100%;
  }

.card obc-progress-bar {
    padding: var(--app-components-user-menu-padding-horizontal)
      var(--app-components-user-menu-padding-horizontal);
  }
`;
export {
  componentStyle as default
};
//# sourceMappingURL=user-menu.css.js.map
