@fpxfd/next/lib/menu-button/index.css

A configurable component library for web built on React.

.next-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  top: 0;
  margin: -1px;
}

.next-menu-btn {
  display: inline-block;
  box-shadow: none;
}
.next-menu-btn-spacing-tb {
  padding: 0px 0;
  padding: var(--popup-spacing-tb, 0px) 0;
}
.next-menu-btn .next-icon {
  transition: transform 100ms linear;
  transition: transform var(--motion-duration-immediately, 100ms) var(--motion-linear, linear);
}
.next-menu-btn .next-menu-btn-arrow::before {
  content: "\e63d";
  content: var(--menu-btn-fold-icon-content, "\e63d");
}
.next-menu-btn.next-expand .next-menu-btn-arrow {
  transform: rotate(180deg);
}
.next-menu-btn-symbol-unfold::before {
  content: "";
  content: var(--menu-btn-unfold-icon-content, "");
}
.next-menu-btn.next-btn-normal .next-menu-btn-arrow {
  color: #a9aeba;
  color: var(--menu-btn-pure-text-normal-icon-color, #a9aeba);
}
.next-menu-btn.next-btn-normal:hover .next-menu-btn-arrow {
  color: #545d75;
  color: var(--btn-pure-normal-color-hover, #545d75);
}
.next-menu-btn.next-btn-secondary .next-menu-btn-arrow {
  color: #284cc0;
  color: var(--menu-btn-pure-text-secondary-icon-color, #284cc0);
}
.next-menu-btn.next-btn-secondary:hover .next-menu-btn-arrow {
  color: #FFFFFF;
  color: var(--btn-pure-secondary-color-hover, #FFFFFF);
}
.next-menu-btn.next-btn-secondary.next-btn-text:hover .next-menu-btn-arrow {
  color: #284cc0;
  color: var(--btn-text-secondary-color-hover, #284cc0);
}
.next-menu-btn.next-btn-primary .next-menu-btn-arrow {
  color: #FFFFFF;
  color: var(--menu-btn-pure-text-primary-icon-color, #FFFFFF);
}
.next-menu-btn.next-btn-primary:hover .next-menu-btn-arrow {
  color: #FFFFFF;
  color: var(--btn-pure-primary-color-hover, #FFFFFF);
}
.next-menu-btn.next-btn-text.next-btn-normal .next-menu-btn-arrow {
  color: #545d75;
  color: var(--menu-btn-text-text-normal-icon-color, #545d75);
}
.next-menu-btn.next-btn-text.next-btn-normal:hover .next-menu-btn-arrow {
  color: #284cc0;
  color: var(--btn-text-normal-color-hover, #284cc0);
}
.next-menu-btn.next-btn-text.next-btn-primary .next-menu-btn-arrow {
  color: #005adc;
  color: var(--menu-btn-text-text-primary-icon-color, #005adc);
}
.next-menu-btn.next-btn-text.next-btn-primary:hover .next-menu-btn-arrow {
  color: #ff6400;
  color: var(--btn-text-primary-color-hover, #ff6400);
}
.next-menu-btn.next-btn-ghost.next-btn-light .next-menu-btn-arrow {
  color: #545d75;
  color: var(--menu-btn-ghost-light-icon-color, #545d75);
}
.next-menu-btn.next-btn-ghost.next-btn-light:hover .next-menu-btn-arrow {
  color: #a9aeba;
  color: var(--btn-ghost-light-color-hover, #a9aeba);
}
.next-menu-btn.next-btn-ghost.next-btn-dark .next-menu-btn-arrow {
  color: #FFFFFF;
  color: var(--menu-btn-ghost-dark-icon-color, #FFFFFF);
}
.next-menu-btn.next-btn-ghost.next-btn-dark:hover .next-menu-btn-arrow {
  color: #FFFFFF;
  color: var(--btn-ghost-dark-color-hover, #FFFFFF);
}
.next-menu-btn.disabled .next-menu-btn-arrow, .next-menu-btn[disabled] .next-menu-btn-arrow {
  color: #c3cbd5;
  color: var(--menu-btn-disabled-icon-color, #c3cbd5);
}
.next-menu-btn.next-btn-text.disabled .next-menu-btn-arrow, .next-menu-btn.next-btn-text[disabled] .next-menu-btn-arrow {
  color: #c3cbd5;
  color: var(--menu-btn-disabled-icon-color, #c3cbd5);
}
.next-menu-btn[disabled].next-btn-ghost.next-btn-dark .next-menu-btn-arrow {
  color: rgba(255, 255, 255, 0.4);
  color: var(--menu-btn-ghost-dark-disabled-icon-color, rgba(255, 255, 255, 0.4));
}
.next-menu-btn[disabled].next-btn-ghost.next-btn-light .next-menu-btn-arrow {
  color: rgba(0, 0, 0, 0.1);
  color: var(--menu-btn-ghost-light-disabled-icon-color, rgba(0, 0, 0, 0.1));
}