/* ==========================================================================
   Specto Theme Switcher (Bricks-native, variable-driven)
   ========================================================================== */

.specto-theme-switcher {
  display: inline-flex;
  border-radius: var(--bricks-border-radius, 4px);
  overflow: hidden;
}

.specto-theme-switcher.circle {
  border-radius: 999px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

@layer specto {
  .specto-theme-switcher .bricks-button:first-child.circle {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  .specto-theme-switcher .bricks-button:last-child.circle {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }
}

.specto-theme-switcher .specto-switcher-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--specto-icon-gap, 6px);

  padding: var(--specto-btn-pad-top, 6px) var(--specto-btn-pad-right, 12px)
    var(--specto-btn-pad-bottom, 6px) var(--specto-btn-pad-left, 12px);

  cursor: pointer;
  line-height: 1;
}

.specto-theme-switcher[style*='--specto-btn-bg'] .specto-switcher-btn {
  background: var(--specto-btn-bg);
  border-color: var(--specto-btn-bg);
}

.specto-theme-switcher .specto-switcher-btn:not(.is-active),
.specto-theme-switcher[style*='--specto-btn-bg'] .specto-switcher-btn:not(.is-active) {
  opacity: 0.5;
}

.specto-theme-switcher .specto-switcher-btn:not(.is-active):hover,
.specto-theme-switcher[style*='--specto-btn-bg'] .specto-switcher-btn:not(.is-active):hover {
  opacity: 0.7;
}

.specto-theme-switcher .specto-switcher-btn.is-active,
.specto-theme-switcher[style*='--specto-btn-bg'] .specto-switcher-btn.is-active {
  pointer-events: none;
}

.bricks-button.outline {
  background: revert;

  &:first-child {
    border-right-width: 1px;
  }

  &:last-child {
    border-left-width: 1px;
  }
}

/* --------------------------------------------------------------------------
   Icons
   -------------------------------------------------------------------------- */

.specto-theme-switcher .specto-switcher-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--specto-icon-size, 16px);
  height: var(--specto-icon-size, 16px);
  line-height: 1;
  width: var(--specto-icon-size, 16px);
}

.specto-theme-switcher .specto-switcher-icon svg,
.specto-theme-switcher .specto-switcher-icon i {
  width: 1em;
  height: 1em;
  display: block;
}

/* --------------------------------------------------------------------------
   Text
   -------------------------------------------------------------------------- */

.specto-theme-switcher .specto-switcher-text {
  line-height: 1;
}