/**
 * @param {string} $scheme - The color scheme of the button. Options are nothing, $scheme-light, $scheme-dark
 * if $scheme-dark is passed, the button will be black text and black outline
 * if $scheme-light is passed, the button will be white text and white outline
 * if no $scheme is passed, the button will depend on the background color via the bg-dark mixin
 *   - if ancestor DOES have bg-dark, then white text and white outline
 *   - if ancestor DOES NOT have bg-dark, then black text and black outline
 */
.ds-icon-button[data-v-90c5b3d7] {
  --opacity-icon-hover: 1;
  width: 24px;
  height: 24px;
  border: none;
  padding: 0px;
  line-height: 0;
  display: inline-block;
  cursor: pointer;
}
@media (min-width: 768px) {
.ds-icon-button[data-v-90c5b3d7] {
    width: 32px;
    height: 32px;
}
}
.ds-icon-button__large[data-v-90c5b3d7] {
  width: 44px;
  height: 44px;
}
@media (min-width: 768px) {
.ds-icon-button__large[data-v-90c5b3d7] {
    width: 44px;
    height: 44px;
}
}
.ds-icon-button__with-background[data-v-90c5b3d7] {
  --icon-color: #000000;
  background-color: var(--ds-icon-btn-bg-color, rgba(255, 255, 255, 0.7));
}
.ds-icon-button__with-background[data-v-90c5b3d7]:disabled {
  --icon-color: #b3b3b3;
}
.ds-icon-button__with-background[data-v-90c5b3d7]:hover {
  background-color: var(--ds-icon-btn-bg-color, rgba(255, 255, 255, 0.85));
}
.ds-icon-button__no-background[data-v-90c5b3d7] {
  --icon-color: #000000;
  background: none;
}
.ds-icon-button__no-background[data-v-90c5b3d7]:disabled {
  --icon-color: #b3b3b3;
}
.ds-icon-button__no-background__dark-mode[data-v-90c5b3d7] {
  --icon-color: #ffffff;
}
.ds-icon-button__no-background__dark-mode[data-v-90c5b3d7]:disabled {
  --icon-color: #6e6e6e;
}
.ds-icon-button__no-background[data-v-90c5b3d7]:hover {
  --opacity-icon-hover: 0.6;
}