@ozen-ui/kit/__inner__/cjs/components/Header/modules/HeaderAccount/HeaderAccount.css

React component library

.HeaderAccount {
  --header-account-background: var(--color-background-primary);
  --header-account-background-hover: var(--color-background-primary-hover);
  --header-account-background-focus: var(--header-account-background-hover);
  --header-account-background-active: var(--color-background-primary-pressed);
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
  justify-content: space-between;
  background-color: var(--header-account-background);
  transition: var(--transition-default) background-color;
  border: none;
  border-radius: var(--border-radius-l);
  padding-block: 6px;
  padding-inline: var(--spacing-2xs) var(--spacing-s);
  flex: 1 1 240px;
  max-inline-size: 240px;
}

  .HeaderAccount:focus:not(:focus-visible, :active, :hover) {
    box-shadow: none;
    background-color: var(--header-account-background);
  }

  .HeaderAccount:focus:not(:focus-visible) {
    box-shadow: none;
  }

  .HeaderAccount:focus {
    outline: 0;
    box-shadow: var(--shadow-outline-focused);
    background-color: var(--header-account-background-focus);
  }

  .HeaderAccount:hover {
    background-color: var(--header-account-background-hover);
  }

  .HeaderAccount:active {
    background-color: var(--header-account-background-active);
  }

  .HeaderAccount-Avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .HeaderAccount-Content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex: 1 1;
    overflow: hidden;
  }

  .HeaderAccount-Label {
    inline-size: 100%;
    text-align: start;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .HeaderAccount-ContentText {
    inline-size: 100%;
    text-align: start;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .HeaderAccount-After {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .HeaderAccount-Chevron {
    color: var(--color-content-secondary);
    transition: var(--transition-default) transform;
  }

  .HeaderAccount_open .HeaderAccount-Chevron {
      transform: rotate(180deg);
    }