.dracula-toggle.style-14 {
  --toggle-bg-light: #eee;
  --toggle-bg-dark: #ff6b03;
  --toggle-icon-light: #484d60;
  --toggle-icon-dark: #fff;

  .dracula-toggle-icon {
    width: calc(22px * var(--toggle-scale));
    height: calc(22px * var(--toggle-scale));
    display: block;
  }

  .toggle-modal {
    border: 1px solid #ddd;
    padding: 0;
    border-radius: 5px;
    opacity: 0;
    position: absolute;
    background-color: var(--toggle-icon-dark);

    &.open {
      opacity: 1;
    }

    &-content {
      padding: 0;
      border-radius: 5px;
      opacity: 1;

      .toggle-option {
        display: flex;
        align-items: center;
        cursor: pointer;
        padding: 2px 10px 7px 10px;
        transition: all 0.2s ease-in-out;
        position: relative;
        z-index: 9;

        &-icon {
          width: 15px;
          height: 15px;
          margin-right: 7px;
          margin-top: 3px;
          background-color: #555;

          &.--light {
            mask: url("../images/toggles/light.svg") no-repeat center / contain;
          }

          &.--dark {
            mask: url("../images/toggles/dark.svg") no-repeat center / contain;
          }

          &.--auto {
            mask: url("../images/toggles/system.svg") no-repeat center / contain;
          }
        }

        &-label {
          font-size: 12px;
          margin-top: 5px;
          color: #555;
          white-space: nowrap;
        }

        &.active {
          .toggle-option-label {
            color: #2471b1;
          }

          .toggle-option-icon {
            background-color: #2471b1;
          }
        }

        &:hover {
          background-color: #eee !important;
        }
      }
    }

    &-arrow {
      width: 8px;
      height: 8px;
      position: absolute;
      transform: rotate(45deg);
      left: 48%;
      bottom: -5px;
      border-bottom: 1px solid rgb(221, 221, 221);
      border-right: 1px solid rgb(221, 221, 221);
      background: inherit;
    }
  }

  &:not(.mode-dark) {
    .dracula-toggle-icon {
      background-color: var(--toggle-icon-light);
      mask: url("../images/toggles/light.svg") no-repeat center / contain;
    }
  }

  &.mode-auto {
    .dracula-toggle-icon {
      background-color: var(--toggle-icon-light);
      mask: url("../images/toggles/system.svg") no-repeat center / contain;
    }
  }

  &.mode-dark {
    .dracula-toggle-icon {
      background-color: var(--toggle-icon-dark);
      mask: url("../images/toggles/dark.svg") no-repeat center / contain;
    }

    .toggle-option {
      &:hover .toggle-option-icon {
        background-color: #555;
      }

      &:hover .toggle-option-label {
        color: #555;
      }

      &-icon {
        background-color: #fff;
      }

      &-label {
        color: #fff;
      }
    }

    .toggle-modal {
      background: var(--toggle-icon-light);
    }
  }
}

html[data-dracula-scheme="dark"] {
  .dracula-toggle.style-14 {
    &.mode-auto {
      .dracula-toggle-icon {
        background-color: var(--toggle-icon-dark);
      }
    }
  }
}

.position-left {
  .toggle-modal {
    left: -50px;
    top: -131.172px;
    border: 1px solid rgb(221, 221, 221);
  }
}

.position-right {
  .toggle-modal {
    left: -50px;
    top: -131.172px;
    border: 1px solid rgb(221, 221, 221);
  }
}