@import "components/inludes/effects";

.dracula-toggle-wrap {
  --side-offset: 30px;
  --bottom-offset: 30px;

  cursor: pointer;
  user-select: none;
  display: inline-flex;

  * {
    box-sizing: border-box;
  }

  &.menu-item {
    line-height: normal !important;
    display: inline-flex;
    align-items: center;
  }

  &.floating {
    --toggle-position: fixed;

    z-index: 9999999999;
    position: var(--toggle-position);
    bottom: var(--bottom-offset);

    &.position-right {
      right: var(--side-offset);
    }

    &.position-left {
      left: var(--side-offset);
    }

    &.draggable {
      max-width: max-content;
      max-height: max-content;
      width: max-content; /* prevent flex/grid stretching */
      will-change: transform, top, left; /* smoother drag */
      user-select: none; /* avoid text selection while dragging */
    }

  }

  &.custom-toggle {
    --toggle-icon-light: url("../images/icons/1.svg") no-repeat center / contain;
    --toggle-icon-dark: url("../images/icons/11.svg") no-repeat center / contain;
    --toggle-width: auto;
    --toggle-padding: 10px;
    --toggle-text-size: 15px;
    --toggle-bg-light: #EEE;
    --toggle-bg-dark: #00288F;
    --toggle-text-color-light: #4B5D8A;
    --toggle-text-color-dark: #FFFFFF;
    --toggle-border-w: 0;
    --toggle-border-color-light: #4B5D8A;
    --toggle-border-color-dark: #FFFFFF;
    --toggle-border-radius: 10px;
    --toggle-icon-spacing: 10px;

    .dracula-toggle {
      display: inline-flex;

      @import "components/toggles/layout-1";
      @import "components/toggles/layout-2";
      @import "components/toggles/layout-3";
      @import "components/toggles/layout-4";
      @import "components/toggles/layout-5";
    }

  }

  &[data-style='14'] {
    --side-offset: 60px;
    --bottom-offset: 40px;
  }

  &.hidden {
    display: none !important;
  }

  .dracula-toggle-move {
    fill: #443a96;
    position: absolute;
    top: -20px;
    left: -20px;
    transition: all .3s ease-in-out;
    opacity: 0;
    width: 20px;
  }

  &:hover svg {
    opacity: 1;
  }

}

.dracula-toggle {
  --toggle-scale: 1;
  transition: all .2s ease-in-out;
  position: relative;
  align-items: center;
  background: transparent;
  padding: 0;
  margin: 0;
  border-color: transparent;

  &:hover,
  &:focus {
    background: transparent;
    border-color: transparent;
  }

  &:focus-visible {
    outline: 1px dotted #ddd;
  }

  &:active {
    outline: none;
  }

  .dracula-toggle-label {
    font-size: .875rem;
    white-space: nowrap;
  }

  @import "components/toggles/style-1";
  @import "components/toggles/style-2";
  @import "components/toggles/style-3";
  @import "components/toggles/style-4";
  @import "components/toggles/style-5";
  @import "components/toggles/style-6";
  @import "components/toggles/style-7";
  @import "components/toggles/style-8";
  @import "components/toggles/style-9";
  @import "components/toggles/style-10";
  @import "components/toggles/style-11";
  @import "components/toggles/style-12";
  @import "components/toggles/style-13";
  @import "components/toggles/style-15";
  @import "components/toggles/style-16";
  @import "components/toggles/style-17";
  @import "components/toggles/style-18";
}

@import "components/toggles/style-14";

// Admin - for excludes

// Admin Dark Mode Toggle
#wp-admin-bar-dracula {

  .dracula-toggle {
    cursor: pointer;
    margin-top: 5px;
    margin-right: 7px;

    > .react-tooltip {
      position: absolute;

      .react-tooltip-arrow {
        display: none;
      }
    }

    .dracula-toggle-icon {
      background-color: #fff !important;
    }

    .toggle-option {
      &-label {
        line-height: 1.5;
      }
    }
  }

}