@import "../common/typography/text.mixins";

.novo-expansion-panel-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 24px;

  &:focus,
  &:hover {
    outline: none;
  }

  &.novo-expanded:focus,
  &.novo-expanded:hover {
    background: inherit;
  }

  &:not([aria-disabled="true"]) {
    cursor: pointer;
  }
}

.novo-content {
  display: flex;
  flex: 1;
  flex-direction: row;
  overflow: hidden;
}

.novo-expansion-panel-header-title,
.novo-expansion-panel-header-description {
  display: flex;
  flex-grow: 1;
  margin-right: 16px;
  align-items: center;
  gap: 1rem;

  [dir="rtl"] & {
    margin-right: 0;
    margin-left: 16px;
  }
}

.novo-expansion-panel-header-description {
  flex-grow: 2;
}

/**
 * Creates the expansion indicator arrow. Done using ::after rather than having
 * additional nodes in the template.
 */
.novo-expansion-indicator {
  &::after {
    border-style: solid;
    border-width: 0 2px 2px 0;
    content: "";
    display: inline-block;
    padding: 3px;
    transform: rotate(-45deg);
    vertical-align: middle;
  }
  margin-right: 10px;
}