@govbr-ds/webcomponents 2.0.0-next.20 → 2.0.0-next.22

package/dist/collection/components/select/select.css

@@ -0,0 +1,865 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  line-height: var(--font-line-height-medium);
+  -webkit-text-size-adjust: 100%;
+     -moz-text-size-adjust: 100%;
+          text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+}
+
+a {
+  background-color: transparent;
+}
+
+
+strong {
+  font-weight: bolder;
+}
+
+small {
+  font-size: 80%;
+}
+
+img {
+  border-style: none;
+}
+
+button,
+input,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  line-height: var(--font-line-height-medium);
+  margin: 0;
+}
+
+button,
+input {
+  overflow: visible;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+button,
+[type=button],
+[type=reset],
+[type=submit] {
+  -webkit-appearance: button;
+     -moz-appearance: button;
+          appearance: button;
+}
+
+button::-moz-focus-inner,
+[type=button]::-moz-focus-inner,
+[type=reset]::-moz-focus-inner,
+[type=submit]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+button:-moz-focusring,
+[type=button]:-moz-focusring,
+[type=reset]:-moz-focusring,
+[type=submit]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+textarea {
+  overflow: auto;
+}
+
+[type=checkbox],
+[type=radio] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+[type=number]::-webkit-inner-spin-button,
+[type=number]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type=search] {
+  -webkit-appearance: textfield;
+     -moz-appearance: textfield;
+          appearance: textfield;
+  outline-offset: -2px;
+}
+
+[type=search]::-webkit-search-decoration {
+  -webkit-appearance: none;
+          appearance: none;
+}
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+          appearance: button;
+  font: inherit;
+}
+
+[hidden] {
+  display: none;
+}
+
+.d-flex {
+  display: flex !important;
+}
+
+.align-items-center {
+  align-items: center !important;
+}
+.col,
+[class*=col-] {
+  padding-left: calc(var(--grid-gutter) * 0.5);
+  padding-right: calc(var(--grid-gutter) * 0.5);
+  width: 100%;
+}
+
+.col {
+  flex: 1 0 0%;
+  min-width: 8.3333333333%;
+}
+
+.col-auto {
+  flex: 0 0 auto;
+  width: auto;
+}
+
+.container {
+  --grid-margin: var(--grid-portrait-margin);
+  --grid-maxwidth: var(--grid-portrait-maxwidth);
+  margin-left: auto;
+  margin-right: auto;
+  max-width: var(--grid-maxwidth);
+  padding-left: var(--grid-margin);
+  padding-right: var(--grid-margin);
+  width: 100%;
+}
+
+.row {
+  --grid-gutter: var(--grid-portrait-gutter);
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: calc(var(--grid-gutter) * -0.5);
+  margin-right: calc(var(--grid-gutter) * -0.5);
+}
+
+@media (min-width: 576px) {
+  .container {
+    --grid-margin: var(--grid-tablet-margin);
+  }
+  .row {
+    --grid-gutter: var(--grid-tablet-gutter);
+  }
+  .container {
+    --grid-maxwidth: calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin));
+  }
+}
+@media (min-width: 992px) {
+  .container {
+    --grid-margin: var(--grid-tablet-margin);
+  }
+  .row {
+    --grid-gutter: var(--grid-tablet-gutter);
+  }
+  .container {
+    --grid-maxwidth: calc(var(--grid-breakpoint-md) - var(--grid-tablet-margin));
+  }
+}
+@media (min-width: 1280px) {
+  .container {
+    --grid-margin: var(--grid-desktop-margin);
+  }
+  .row {
+    --grid-gutter: var(--grid-desktop-gutter);
+  }
+  .container {
+    --grid-maxwidth: calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin));
+  }
+}
+@media (min-width: 1600px) {
+  .container {
+    --grid-margin: var(--grid-tv-margin);
+  }
+  .row {
+    --grid-gutter: var(--grid-tv-gutter);
+  }
+  .container {
+    --grid-maxwidth: calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin));
+  }
+}
+
+.mt-1 {
+  margin-top: var(--spacing-scale-half) !important;
+}
+
+.mr-1 {
+  margin-right: var(--spacing-scale-half) !important;
+}
+
+.mb-1 {
+  margin-bottom: var(--spacing-scale-half) !important;
+}
+
+.mr-2 {
+  margin-right: var(--spacing-scale-base) !important;
+}
+
+.mr-n2 {
+  margin-right: calc(var(--spacing-scale-base) * -1) !important;
+}
+
+.ml-2 {
+  margin-left: var(--spacing-scale-base) !important;
+}
+
+.mb-3 {
+  margin-bottom: var(--spacing-scale-2x) !important;
+}
+
+.mr-auto {
+  margin-right: auto !important;
+}
+
+.pt-half {
+  padding-top: var(--spacing-scale-half) !important;
+}
+
+.py-3 {
+  padding-bottom: var(--spacing-scale-2x) !important;
+  padding-top: var(--spacing-scale-2x) !important;
+}
+
+.py-4 {
+  padding-bottom: var(--spacing-scale-3x) !important;
+  padding-top: var(--spacing-scale-3x) !important;
+}
+body {
+  --bg-color: var(--background);
+  --bg-color-rgb: var(--background-rgb);
+  --bg-color-hsl: var(--background-hsl);
+  --font-size: var(--font-size-scale-base);
+  --font-weight: var(--font-weight-regular);
+  --link-color: var(--interactive);
+  --link-color-rgb: var(--interactive-rgb);
+  --link-color-hsl: var(--interactive-hsl);
+  --line-height: var(--font-line-height-medium);
+  --text-color: var(--color);
+  --text-color-rgb: var(--color-rgb);
+  --text-color-hsl: var(--color-hsl);
+  background: var(--bg-color);
+  color: var(--text-color);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size);
+  font-weight: var(--font-weight);
+  line-height: var(--line-height);
+}
+
+p {
+  color: var(--color);
+  font-size: var(--font-size-scale-base);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--font-line-height-medium);
+  margin-bottom: var(--spacing-scale-2x);
+  margin-top: 0;
+}
+p a {
+  text-decoration: underline;
+}
+
+@media (min-width: 576px) {
+  p {
+    font-size: var(--font-size-scale-up-01);
+  }
+}
+a {
+  --focus-offset: var(--spacing-scale-half);
+  color: var(--interactive);
+  text-decoration: none;
+}
+a:focus {
+  outline: none;
+}
+ a:focus-visible {
+  outline-color: var(--focus);
+  outline-offset: var(--focus-offset);
+  outline-style: var(--focus-style);
+  outline-width: var(--focus-width);
+}
+a:not(:disabled):hover {
+  background-image: linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)));
+}
+a:not(:disabled):active {
+  background-image: linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)));
+}
+
+button {
+  cursor: pointer;
+}
+
+img {
+  max-width: 100%;
+  vertical-align: middle;
+}
+ul {
+  margin-bottom: var(--spacing-scale-2x);
+  margin-top: 0;
+  padding: 0 0 0 var(--spacing-scale-5x);
+}
+
+label,
+.label {
+  color: var(--color);
+  font-size: var(--font-size-scale-base);
+  font-weight: var(--font-weight-semi-bold);
+  line-height: var(--font-line-height-medium);
+  margin-bottom: var(--spacing-scale-half);
+}
+
+::-moz-placeholder {
+  color: var(--color-light);
+  font-size: var(--font-size-scale-base);
+  font-style: italic;
+  font-weight: var(--font-weight-regular);
+  line-height: var(--font-line-height-medium);
+  margin-bottom: var(--spacing-scale-half);
+  margin-top: var(--spacing-scale-half);
+  opacity: 1;
+}
+
+::placeholder,
+.placeholder {
+  color: var(--color-light);
+  font-size: var(--font-size-scale-base);
+  font-style: italic;
+  font-weight: var(--font-weight-regular);
+  line-height: var(--font-line-height-medium);
+  margin-bottom: var(--spacing-scale-half);
+  margin-top: var(--spacing-scale-half);
+  opacity: 1;
+}
+
+input,
+textarea,
+.input {
+  color: var(--color-light);
+  font-size: var(--font-size-scale-up-01);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-low);
+  margin-bottom: var(--spacing-scale-half);
+}
+
+.text-pure-0 {
+  color: var(--pure-0) !important;
+}
+
+.text-primary-default {
+  color: var(--color-primary-default) !important;
+}
+
+.bg-support-01 {
+  --color: var(--color-dark);
+  --color-rgb: var(--color-dark-rgb);
+  --text-color: var(--color-dark);
+  --interactive: var(--interactive-dark);
+  --interactive-rgb: var(--interactive-dark-rgb);
+  --visited: var(--visited-dark);
+  --hover: var(--hover-dark);
+  --pressed: var(--pressed-dark);
+  --focus-color: var(--focus-color-dark);
+  --focus: var(--focus-color-dark);
+  background: var(--color-support-01) !important;
+}
+
+.text-nowrap {
+  white-space: nowrap !important;
+}
+
+.text-base {
+  font-size: var(--font-size-scale-base) !important;
+}
+
+.highlight {
+  background: var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));
+  color: var(--status-highlight-text);
+  padding: 0 var(--spacing-scale-half);
+}
+
+[disabled],
+.disabled {
+  cursor: not-allowed;
+  opacity: var(--disabled);
+}
+[disabled] *,
+.disabled * {
+  pointer-events: none;
+}
+
+[data-toggle=dropdown] + * {
+  position: absolute;
+}
+
+.dropdown {
+  position: relative;
+}
+.dropdown [data-toggle=dropdown] + * {
+  box-shadow: var(--surface-shadow-sm);
+  left: 0;
+  position: absolute;
+  top: 100%;
+}
+.dropdown .br-item {
+  --color: var(--color-light);
+  --color-rgb: var(--color-light-rgb);
+  --text-color: var(--color-light);
+  --interactive: var(--interactive-light);
+  --interactive-rgb: var(--color-rgb);
+  --visited: var(--visited-light);
+  --hover: var(--hover-light);
+  --pressed: var(--pressed-light);
+  --focus-color: var(--focus-color-light);
+  --focus: var(--focus-color-light);
+  --item-padding-y: var(--spacing-scale-2x);
+  background-color: var(--background-light);
+  color: var(--color);
+}
+.dropdown .br-item:not(:last-child) {
+  border-bottom: 1px solid var(--border-color);
+}
+.dropdown .br-item.selected {
+  --color: var(--color-dark);
+  --color-rgb: var(--color-dark-rgb);
+  --text-color: var(--color-dark);
+  --interactive: var(--interactive-dark);
+  --interactive-rgb: var(--interactive-dark-rgb);
+  --visited: var(--visited-dark);
+  --hover: var(--hover-dark);
+  --pressed: var(--pressed-dark);
+  --focus-color: var(--focus-color-dark);
+  --focus: var(--focus-color-dark);
+}
+
+.br-select {
+  --select-divider: 1px solid var(--color-secondary-04);
+  --select-shadow: var(--surface-shadow-md);
+  max-width: 400px;
+  min-width: 100px;
+  position: relative;
+}
+.br-select .br-input input {
+  padding-right: 29px;
+  text-overflow: ellipsis;
+}
+.br-select .br-input input::after {
+  bottom: 0;
+  padding: 0 5px;
+  position: absolute;
+  right: 0;
+}
+.br-select .br-list {
+  background: var(--bg-color);
+  box-shadow: var(--select-shadow);
+  display: none;
+  margin-top: -2px;
+  max-height: 404px;
+  overflow: auto;
+  position: absolute;
+  resize: none;
+  width: 100%;
+  z-index: 1;
+}
+.br-select .br-list::-webkit-scrollbar {
+  height: var(--spacing-scale-base);
+  width: var(--spacing-scale-base);
+}
+.br-select .br-list::-webkit-scrollbar-track {
+  background: var(--gray-10);
+}
+.br-select .br-list::-webkit-scrollbar-thumb {
+  background: var(--gray-30);
+}
+.br-select .br-list:hover::-webkit-scrollbar-thumb {
+  background: var(--gray-40);
+}
+.br-select .br-list:focus, .br-select .br-list:active {
+  color: var(--color-secondary-09);
+  outline: none;
+}
+.br-select .br-list:hover::-webkit-scrollbar-thumb {
+  background: var(--color-secondary-07);
+}
+.br-select .br-list[expanded] {
+  display: block;
+}
+.br-select .br-item {
+  --color: var(--color-light);
+  --color-rgb: var(--color-light-rgb);
+  --text-color: var(--color-light);
+  --interactive: var(--interactive-light);
+  --interactive-rgb: var(--interactive-light-rgb);
+  --visited: var(--visited-light);
+  --hover: var(--hover-light);
+  --pressed: var(--pressed-light);
+  --focus-color: var(--focus-color-light);
+  --focus: var(--focus-color-light);
+  --item-padding-y: var(--spacing-scale-2x);
+}
+.br-select .br-item .content {
+  padding: 0;
+}
+.br-select .br-item .br-checkbox,
+.br-select .br-item .br-radio {
+  --item-padding-x: var(--spacing-scale-2x);
+  --item-padding-y: var(--spacing-scale-2x);
+}
+.br-select .br-item .br-checkbox input:hover:not(:disabled) + label::before,
+.br-select .br-item .br-radio input:hover:not(:disabled) + label::before {
+  background-image: none;
+}
+.br-select .br-item .br-checkbox input + label,
+.br-select .br-item .br-radio input + label {
+  padding-left: calc(var(--checkbox-padding) + var(--checkbox-size) + var(--item-padding-x));
+}
+.br-select .br-item .br-radio input + label {
+  color: var(--text-color);
+  display: block;
+  height: auto;
+  min-height: 0;
+  padding: var(--item-padding);
+}
+.br-select .br-item .br-radio input + label::before, .br-select .br-item .br-radio input + label::after {
+  content: none;
+}
+.br-select .br-item:not(:last-child) {
+  border-bottom: var(--select-divider);
+}
+.br-select .br-item:not([disabled]) {
+  --focus-offset: calc(var(--spacing-scale-half) * -1);
+}
+.br-select .br-item:not([disabled]):focus {
+  outline: none;
+}
+ .br-select .br-item:not([disabled]):focus-visible {
+  outline-color: var(--focus);
+  outline-offset: var(--focus-offset);
+  outline-style: var(--focus-style);
+  outline-width: var(--focus-width);
+}
+.br-select .br-item:not([disabled]):not(:disabled):hover {
+  background-image: linear-gradient(rgba(var(--color-rgb), var(--hover)), rgba(var(--color-rgb), var(--hover)));
+}
+.br-select .br-item.selected, .br-select .br-item[selected] {
+  --color: var(--color-dark);
+  --color-rgb: var(--color-dark-rgb);
+  --text-color: var(--color-dark);
+  --interactive: var(--interactive-dark);
+  --interactive-rgb: var(--interactive-dark-rgb);
+  --visited: var(--visited-dark);
+  --hover: var(--hover-dark);
+  --pressed: var(--pressed-dark);
+  --focus-color: var(--focus-color-dark);
+  --focus: var(--focus-color-dark);
+}
+.br-select .br-item.selected:focus, .br-select .br-item[selected]:focus {
+  outline: none;
+}
+ .br-select .br-item.selected:focus-visible, .br-select .br-item[selected]:focus-visible {
+  outline-color: var(--focus);
+  outline-offset: var(--focus-offset);
+  outline-style: var(--focus-style);
+  outline-width: var(--focus-width);
+}
+.br-select .br-item.selected:not(:disabled):hover, .br-select .br-item[selected]:not(:disabled):hover {
+  background-image: linear-gradient(rgba(var(--color-rgb), var(--hover)), rgba(var(--color-rgb), var(--hover)));
+}
+.br-select .br-item.disabled {
+  line-height: calc(var(--font-line-height-high) * 2);
+  padding-left: calc(var(--item-padding) + var(--spacing-scale-base));
+}
+.br-select .br-item.highlighted, .br-select .br-item[highlighted] {
+  background-color: var(--gray-2);
+  padding-bottom: var(--spacing-scale-base);
+  padding-top: var(--spacing-scale-base);
+}
+.br-select .br-item.highlighted .br-checkbox label,
+.br-select .br-item.highlighted .br-radio label, .br-select .br-item[highlighted] .br-checkbox label,
+.br-select .br-item[highlighted] .br-radio label {
+  font-weight: var(--font-weight-semi-bold);
+}
+.br-select .br-item.highlighted .br-checkbox:hover,
+.br-select .br-item.highlighted .br-radio:hover, .br-select .br-item[highlighted] .br-checkbox:hover,
+.br-select .br-item[highlighted] .br-radio:hover {
+  background: linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)));
+}
+.br-select .br-item.highlighted .br-checkbox:hover label,
+.br-select .br-item.highlighted .br-radio:hover label, .br-select .br-item[highlighted] .br-checkbox:hover label,
+.br-select .br-item[highlighted] .br-radio:hover label {
+  color: var(--text-color);
+}
+.br-select .br-item.highlighted.selected, .br-select .br-item.highlighted[selected], .br-select .br-item[highlighted].selected, .br-select .br-item[highlighted][selected] {
+  background-color: var(--selected);
+}
+ .br-select.dark-mode .br-input,
+.br-select.dark-mode .br-input label {
+  --color: var(--color-dark);
+  --focus-color: var(--focus-color-dark);
+}
+
+.br-item {
+  background: var(--background);
+  --item-padding-x: var(--spacing-scale-2x);
+  --item-padding-y: var(--spacing-scale-base);
+  --item-padding: var(--item-padding-y) var(--item-padding-x);
+  --focus-offset: calc(var(--focus-width) * -1);
+  border: 0;
+  color: var(--color);
+  display: block;
+  font-weight: var(--font-weight);
+  padding: var(--item-padding);
+  text-align: left;
+  width: 100%;
+}
+.br-item .row {
+  margin-left: calc(-1 * var(--spacing-scale-base));
+  margin-right: calc(-1 * var(--spacing-scale-base));
+}
+.br-item .row .col,
+.br-item .row [class*=col-] {
+  padding-left: var(--spacing-scale-base);
+  padding-right: var(--spacing-scale-base);
+}
+.br-item::after {
+  clear: both;
+  content: "";
+  display: block;
+}
+.br-item[data-toggle] {
+  cursor: pointer;
+}
+.br-item[data-toggle=selection]:not(:disabled):hover {
+  background-image: linear-gradient(rgba(var(--color-rgb), var(--hover)), rgba(var(--color-rgb), var(--hover)));
+}
+.br-item > .br-checkbox:not(.hidden-label), .br-item > .br-radio:not(.hidden-label) {
+  margin-bottom: calc(var(--item-padding-y) * -1);
+  margin-left: calc(var(--item-padding-x) * -1);
+  margin-right: calc(var(--item-padding-x) * -1);
+  margin-top: calc(var(--item-padding-y) * -1);
+}
+.br-item > .br-checkbox:not(.hidden-label) input + label, .br-item > .br-radio:not(.hidden-label) input + label {
+  padding-bottom: var(--item-padding-y);
+  padding-top: var(--item-padding-y);
+  top: 1px;
+  width: 100%;
+}
+.br-item > .br-checkbox:not(.hidden-label) input + label::before, .br-item > .br-radio:not(.hidden-label) input + label::before {
+  left: var(--item-padding-x);
+  top: calc(var(--item-padding-y) - 1px);
+}
+.br-item > .br-checkbox:not(.hidden-label) input + label:empty, .br-item > .br-radio:not(.hidden-label) input + label:empty {
+  left: 0;
+  top: 1px;
+}
+.br-item > .br-checkbox:not(.hidden-label) input:hover:not(:disabled) + label::before, .br-item > .br-radio:not(.hidden-label) input:hover:not(:disabled) + label::before {
+  background-image: none;
+}
+.br-item > .br-checkbox input:not(:indeterminate) + label {
+  min-height: calc(var(--checkbox-size) + var(--item-padding-y) * 2);
+}
+.br-item > .br-checkbox input:not(:indeterminate) + label:not(:empty) {
+  padding-left: calc(var(--checkbox-padding) + var(--checkbox-size) + var(--item-padding-x));
+}
+.br-item > .br-checkbox input:not(:indeterminate) + label::after {
+  left: calc(var(--item-padding-x) + 8px);
+  top: calc(var(--item-padding-y) + 4px);
+}
+.br-item > .br-checkbox input:not(:indeterminate) + label:empty {
+  min-height: var(--checkbox-size);
+}
+.br-item > .br-checkbox input:not(:indeterminate) + label:empty::after {
+  left: 8px;
+  top: 4px;
+}
+.br-item .br-radio input + label {
+  min-height: calc(var(--radio-size) + var(--item-padding-y) * 2);
+  padding-left: calc(var(--spacing-scale-base) + var(--radio-size) + var(--item-padding-x));
+}
+.br-item .br-radio input + label::after {
+  left: calc(var(--item-padding-x) + var(--radio-bullet-position));
+  top: calc(var(--item-padding-y) + var(--radio-bullet-position) - 1px);
+}
+.br-item .br-radio input + label:empty {
+  min-height: var(--radio-size);
+}
+.br-item .br-radio input + label:empty::after {
+  left: var(--radio-bullet-position);
+  top: var(--radio-bullet-position);
+}
+.br-item.highlight {
+  --color: var(--color-dark);
+  --color-rgb: var(--color-dark-rgb);
+  --text-color: var(--color-dark);
+  --interactive: var(--interactive-dark);
+  --interactive-rgb: var(--interactive-dark-rgb);
+  --visited: var(--visited-dark);
+  --hover: var(--hover-dark);
+  --pressed: var(--pressed-dark);
+  --focus-color: var(--focus-color-dark);
+  --focus: var(--focus-color-dark);
+}
+.br-item.selected {
+  --color: var(--color-dark);
+  --color-rgb: var(--color-dark-rgb);
+  --text-color: var(--color-dark);
+  --interactive: var(--interactive-dark);
+  --interactive-rgb: var(--interactive-dark-rgb);
+  --visited: var(--visited-dark);
+  --hover: var(--hover-dark);
+  --pressed: var(--pressed-dark);
+  --focus-color: var(--focus-color-dark);
+  --focus: var(--focus-color-dark);
+  background-color: var(--selected);
+}
+.br-item.active {
+  --color: var(--color-dark);
+  --color-rgb: var(--color-dark-rgb);
+  --text-color: var(--color-dark);
+  --interactive: var(--interactive-dark);
+  --interactive-rgb: var(--interactive-dark-rgb);
+  --visited: var(--visited-dark);
+  --hover: var(--hover-dark);
+  --pressed: var(--pressed-dark);
+  --focus-color: var(--focus-color-dark);
+  --focus: var(--focus-color-dark);
+  background-color: var(--active);
+  color: var(--color);
+}
+ .br-item.dark-mode {
+  --color: var(--color-dark);
+  --color-rgb: var(--color-dark-rgb);
+  --text-color: var(--color-dark);
+  --interactive: var(--interactive-dark);
+  --interactive-rgb: var(--interactive-dark-rgb);
+  --visited: var(--visited-dark);
+  --hover: var(--hover-dark);
+  --pressed: var(--pressed-dark);
+  --focus-color: var(--focus-color-dark);
+  --focus: var(--focus-color-dark);
+}
+ .br-item.dark-mode.active {
+  --color: var(--color-light);
+  --color-rgb: var(--color-light-rgb);
+  --text-color: var(--color-light);
+  --interactive: var(--interactive-light);
+  --interactive-rgb: var(--active-rgb);
+  --visited: var(--visited-light);
+  --hover: var(--hover-light);
+  --pressed: var(--pressed-light);
+  --focus-color: var(--focus-color-light);
+  --focus: var(--focus-color-light);
+  background-color: var(--background-light);
+  color: var(--active);
+}
+.br-item[data-toggle]:not(:disabled):hover {
+  background-image: linear-gradient(rgba(var(--color-rgb), var(--hover)), rgba(var(--color-rgb), var(--hover)));
+}
+.br-item .content {
+  align-items: center;
+  display: flex;
+}
+.br-item [class*=fa-] {
+  height: 16px;
+  width: 14px !important;
+}
+
+a.br-item {
+  color: var(--interactive);
+}
+a.br-item:not(:disabled):hover {
+  background-image: linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)));
+}
+a.br-item:not(:disabled):active {
+  background-image: linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)));
+}
+
+button.br-item {
+  background-color: transparent;
+  color: var(--color);
+}
+button.br-item:focus {
+  outline: none;
+}
+ button.br-item:focus-visible {
+  outline-color: var(--focus);
+  outline-offset: var(--focus-offset);
+  outline-style: var(--focus-style);
+  outline-width: var(--focus-width);
+}
+button.br-item:not(:disabled):hover {
+  background-image: linear-gradient(rgba(var(--color-rgb), var(--hover)), rgba(var(--color-rgb), var(--hover)));
+}
+button.br-item:not(:disabled):active {
+  background-image: linear-gradient(rgba(var(--color-rgb), var(--pressed)), rgba(var(--color-rgb), var(--pressed)));
+}
+
+:host {
+  display: block;
+}
+:host .br-select br-list {
+  background-color: var(--bg-color);
+  box-shadow: var(--select-shadow);
+  margin-top: -2px;
+  max-height: 404px;
+  overflow: auto;
+  position: absolute;
+  resize: none;
+  width: 100%;
+  z-index: 1;
+}
+:host .br-select br-list::-webkit-scrollbar {
+  height: var(--spacing-scale-base);
+  width: var(--spacing-scale-base);
+}
+:host .br-select br-list::-webkit-scrollbar-track {
+  background: var(--gray-10);
+}
+:host .br-select br-list::-webkit-scrollbar-thumb {
+  background: var(--gray-30);
+}
+:host .br-select br-list:hover::-webkit-scrollbar-thumb {
+  background: var(--gray-40);
+}
+:host .br-select br-list:focus, :host .br-select br-list:active {
+  color: var(--color-secondary-09);
+  outline: none;
+}
+:host .br-select br-list:hover::-webkit-scrollbar-thumb {
+  background: var(--color-secondary-07);
+}
+:host .br-select br-list .br-item br-radio::part(radio-input) {
+  visibility: hidden;
+  height: 0;
+  width: 0;
+}
+:host .br-select br-list .br-item br-radio::part(radio-label) {
+  padding-left: var(--spacing-scale-base);
+  position: relative;
+}
+:host .br-select br-list .br-item br-radio::part(radio-label)::before, :host .br-select br-list .br-item br-radio::part(radio-label)::after {
+  display: none;
+}