@import "components/inludes/helpers";
@import "components/inludes/dom-outline";

// Top Bar Menu
#wpadminbar #wp-admin-bar-dracula-live-edit {

  .ab-item {
    background: #7C5DEE;
    transition: all 0.2s ease-in-out;

    &:hover {
      background: darken(#7C5DEE, 5%);
      color: #fff;
    }

    &:before {
      content: "\f464";
      top: 2px;
    }
  }

}

.dracula-live-edit-wrap {
  @import "./components/settings/image-replacement";
  @import "./components/settings/toggles";
  @import "./components/inludes/code-editor";

  position: relative;
  font-family: "Open Sans", sans-serif;


  * {
    box-sizing: border-box;
  }

  .dracula-live-edit {
    .dracula-color-palette {
      .components-dropdown {
        width: 100%;
      }

      .components-color-palette__custom-color-wrapper {
        width: 100%;
      }

      .block-editor-color-gradient-control__fieldset {
        padding: 0;
        border: none;
      }

    }

    &:not(.dracula-editor-live-edit) {
      position: fixed;
      z-index: 99999;
      right: 0;
      top: 50px;
      background: #F7F7FD;
      color: #3E3C53;
      width: 20rem;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      border-radius: 5px;
    }

    .field-video-settings {
      img {
        width: auto !important;
      }
    }

    // Editor Settings
    &.dracula-editor-live-edit {
      .dracula-live-edit-menu {
        border-top: 1px solid #ddd;
        border-radius: 0;
      }

      .dracula-live-edit-menu {
        border-top: 1px solid #ddd !important;
      }

      .dracula-settings-content {
        margin: 0;
        padding: 0;
        border-radius: 0;

        .inner-tabs {
          position: static;
          margin: 7px 5px 5px 5px;
        }

        .settings-field {
          padding: 5px 7px 10px 7px;
          border: 0;
          border-bottom: 1px dashed #ddd;
          border-radius: 0;
          margin-bottom: 0;

          .settings-field-label {
            width: 100%;
            margin-bottom: 5px;
            font-weight: 500;
            font-size: .875rem;

            &:after {
              display: none;
            }
          }

          &-content {
            margin: 0;

            .settings-field-inner {
              margin-top: 0;
            }
          }

          &-sub {
            padding: 0;

            .settings-field {
              border: none;
              margin-left: 0;
            }

          }

          &.field-page-specific-dark-mode {
            flex-direction: row;
            align-items: center;

            .settings-field-label {
              margin: 0;
            }

            .settings-field-content {
              width: auto;
            }

          }

        }
      }
    }
  }

  .dracula-live-edit-header {
    display: flex;
    align-items: center;
    padding: 10px;
    background: #FFF;
    border-bottom: 1px solid #E5E5E5;
    border-radius: 5px 5px 0 0;

    i {
      cursor: pointer;
      margin-right: 5px;
      color: #6E6D7E;
      transition: all 0.2s ease-in-out;

      &:hover {
        color: #3E3C53;
      }
    }

    .header-title {
      font-size: .9rem;
    }

    .drag-handle {
      cursor: move;
      margin-left: auto;
      margin-right: 10px;
    }

    button {
      border: none;
      color: #fff;
      cursor: pointer;
      background: linear-gradient(180deg, #9088F3 0%, #7367FB 100%);
      padding: 7px 12px;
      border-radius: .25rem;
      font-size: .875rem;
      font-weight: normal;
      display: flex;
      align-items: center;
      height: 32px;
      transition: all 0.2s ease-in-out;
      text-transform: capitalize;

      i {
        color: inherit;
      }

      .components-spinner {
        margin: 0 5px 0 0;
        border-radius: 50%;
      }

      &:hover {
        background: linear-gradient(180deg, #7367FB 0%, #9088F3 100%);
      }
    }

    .customize-type-wrap {
      flex: 1;
      margin-right: 15px;

      .selected-type {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 5px 0 10px;
        height: 32px;
        border: 1px solid #E5E5E5;
        border-radius: 5px;
        background: #FFF;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
        user-select: none;
        font-size: .9rem;

        i {
          margin-right: 0;
        }
      }

      .customize-types {
        display: flex;
        flex-direction: column;
        background: #FFF;

        .type-item {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          padding: 10px;
          cursor: pointer;
          transition: all 0.2s ease-in-out;
          line-height: 1;

          &:not(:last-child) {
            border-bottom: 1px solid #E5E5E5;
          }

          .type-icon {
            margin-right: 7px;

            svg {
              width: 20px;
              height: 20px;
            }
          }

          .item-content {
            display: flex;
            flex-direction: column;

            .item-label {
              font-weight: 600;
              margin-bottom: 3px;
              font-size: .75rem;
              color: #555;
            }

            .item-description {
              font-size: .75rem;
              color: #6E6D7E;
            }
          }

          &:hover {
            background: #F7F7FD;
          }

          &.active {
            background: rgba(#7C5DEE, 0.2);
          }

        }

      }

      .dracula-tooltip {
        padding: 0;
        border: 1px solid #E5E5E5;
        border-radius: 5px;
        opacity: 1;

        &:after {
          border-bottom-color: #E5E5E5;
        }
      }

    }
  }

  .dracula-live-edit-menu {
    background: #FFF;
    border-radius: 0 0 5px 5px;

    &-item {
      display: flex;
      align-items: center;
      padding: 10px 12px;
      cursor: pointer;
      transition: background .2s ease-in-out;
      font-size: 15px;
      user-select: none;
      border-bottom: 1px solid rgba(#E5E5E5, 0.5);

      img {
        width: 22px;
        height: 22px;
        margin-right: 7px;
      }

      i {
        margin-left: auto;
      }

      &:nth-child(odd) {
      }

      &:hover {
        background: rgba(#675ED5, .15);
      }

      &.active {
        background: rgba(#675ED5, .15);
        border-bottom: 1px solid rgba(#675ED5, .1);
      }

      &:not(.active):last-child {
        border-bottom: none;
        border-radius: 0 0 5px 5px;
      }

    }
  }

  .dracula-settings-content {
    padding: 10px 15px;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    background: #FFF;
    border-radius: 0 0 5px 5px;
    margin: 0;

    &-header {
      display: none;
    }

    .inner-tabs {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
      background: rgba(#675ED5, .15);
      border-radius: 7px;
      padding: 5px;
      gap: 5px;

      .tab-item {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
        padding: 5px 10px;
        border-radius: 5px;
        user-select: none;
        text-align: center;
        background: transparent;
        color: #555;
        height: 35px;
        width: auto;
        margin: 0;
        font-size: 13px;
        flex: 1;
        border: 1px solid #ddd;
        line-height: 1;

        .dracula-btn-icon {
          display: none;
        }

        span {
          white-space: nowrap;
          text-transform: capitalize;
        }

        &:hover {
          background: rgba(#675ED5, .25);
        }

        &.active {
          background: $dracula_color_light;
          color: #fff;
        }
      }
    }

    .settings-field {
      display: flex;
      flex-flow: column;
      border: 0;
      border-radius: 0;
      border-bottom: 1px solid #E5E5E5;
      margin-bottom: 7px;
      padding: 0;
      padding-bottom: 15px;
      margin-left: unset;

      &:last-child {
        margin-bottom: 0;
        padding: 0;
        border-bottom: 0 !important;
      }

      &-content {
        width: 100%;
        margin: 0;
        flex: unset;

        & > div {
          width: 100%;

          .dracula-text-control {
            width: 100%;
          }

          .custom-presets-wrap {
            .custom-presets-item {
              display: flex;
              align-items: center;
              justify-content: space-between;
              flex-wrap: wrap;
              gap: 10px;

              .color-preset {
                width: calc(50% - 5px);
                overflow: hidden;
                display: flex;
                align-items: center;
                cursor: pointer;
                border-radius: 5px;
                position: relative;
                border: 1px solid rgba(221, 221, 221, 0.1);
                justify-content: center;

                svg {
                  width: 100%;
                  height: 100%;

                  text {
                    font-weight: 600;
                    font-size: 6rem;
                  }
                }

                i {
                  opacity: 0;
                  top: auto;
                  right: auto;
                }

                .active-badge {
                  position: absolute;
                  background: #7c5dee;
                  padding: 7px;
                  color: #FFF;
                  border-radius: 50%;
                  height: 24px;
                  width: 24px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  border: 1px solid #7c5dee;
                }

                .delete-preset {
                  position: absolute;
                  top: 7px;
                  right: 7px;
                  border-radius: 5px;
                  padding: 5px;
                  background: #EB5757;
                  width: 24px;
                  color: #fff;
                  height: 24px;
                  font-size: 14px;
                  opacity: 0;
                  transition: all 0.3s ease-in-out;
                }

                &:hover .delete-preset {
                  opacity: 1;
                }
              }

              .custom-presets-btn {
                width: 135.5px;
                height: 90.7px;
                border: 1.7px dashed #C0C0C0;
                display: flex;
                align-items: center;
                border-radius: 10px;
                justify-content: center;
                cursor: pointer;
              }

              .active {
                i {
                  opacity: 1;
                }
              }
            }
          }
        }

        & + .settings-field-label {
          margin-top: 15px;
        }

      }

      &-sub {
        margin-top: 10px;
        width: 100%;

        .settings-field{
          margin-left: auto;
        }

      }

      .settings-field-label, h3 {
        width: 100%;
        margin-top: 0;
        margin-bottom: 10px;
        font-size: .9rem;
        font-weight: 500;
        line-height: 1.5;
        color: #3E3C53;
        text-transform: capitalize;
        display: flex;
        align-items: center;

        svg {
          margin-right: 3px;
          width: 15px;
          aspect-ratio: 1;

          path {
            fill: rgb(109, 106, 126);
          }
        }

        &:after {
          display: none;
        }

      }

      .description {
        display: none;
      }

      .components-base-control__field {
        margin-bottom: 0;
      }

      .dracula-range-control {
        display: inline-block;
        margin-top: -5px;

        .components-range-control__reset {
          height: 25px;
          min-height: 25px;
          font-size: .75rem;
          width: auto;
          padding: 3px 5px;
          margin-left: 5px;
        }
      }

      .dracula-color-palette {
      }

      .components-button-group,
      .components-radio-group {
        padding: 5px;
        margin-bottom: 0;

        button {
          padding: 3px 12px;
          margin: 2px !important;
          line-height: 1;
          font-size: 13px;
          font-weight: normal;

          span {
            line-height: 1;
            text-transform: capitalize;
          }
        }

        .dracula-btn-icon {
          display: none;
        }
      }

      .dracula-select {
        &__control {
          background: rgba(#675ED5, .15);
          border: 1px solid #E5E5E5;

          .dracula-select__single-value {
            color: #3E3C53;
          }
        }

        &__menu {
          background: #FFF;
          border: 1px solid #E5E5E5;
          border-radius: 5px;
          box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 2px 4px rgba(0, 0, 0, .2);
          margin-top: 5px;
          padding: 5px 0;
          z-index: 9999;

          .dracula-select__option {
            padding: 10px 15px;
            cursor: pointer;
            transition: all 0.2s ease-in-out;
            font-size: 15px;
            user-select: none;

            &:hover {
              background: rgba(#675ED5, .15);
            }

            &--is-focused,
            &--is-selected {
              background: rgba(#675ED5, .15);
              color: #3E3C53;
            }


          }

          /* width */
          ::-webkit-scrollbar {
            width: 5px;
          }

          /* Track */
          ::-webkit-scrollbar-track {
            background: lighten(#34495e, 20%);
          }

          /* Handle */
          ::-webkit-scrollbar-thumb {
            background: #34495e;
          }

          /* Handle on hover */
          ::-webkit-scrollbar-thumb:hover {
            background: darken(#34495e, 5%);
          }
        }

        &__option {
          transition: background .2s ease-in-out;

          &:nth-child(odd) {
            //background: rgba(#675ED5, .15);
          }

          &:hover {
            background: rgba(#675ED5, .15);
          }
        }

      }

      .components-select-control {
        .components-input-control__backdrop {
          border-color: #E5E5E5;
        }
      }

      .dracula-textarea {
        textarea {
          border-radius: .5rem;
          background: rgba(#675ED5, .15);
          border: 1px solid #E5E5E5;
        }
      }

      .select-elements {
        margin-top: 10px;
        width: 100%;
        height: 40px;
        background: rgba(#675ED5, .1);
        border: 1px dashed rgba(#675ED5, .5);
        color: $dracula_color;
        transition: background .2s ease-in-out;
        text-transform: capitalize;

        .dracula-btn-icon {
          width: 20px;
          height: 20px;
          background: $dracula_color;
        }

        &.active {
          background: #F52F51;
          color: #FFF;

          .dracula-btn-icon {
            background: #FFF;
          }
        }

        &:hover:not(.active) {
          background: rgba(#675ED5, .2);
        }

      }

      .color-presets {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;

        .color-preset {
          width: calc(50% - 5px);
          overflow: hidden;
          display: flex;
          align-items: center;
          cursor: pointer;
          border-radius: 5px;
          position: relative;
          border: 1px solid rgba(#ddd, .1);
          min-width: unset;

          svg {
            width: 100%;
            height: 100%;

            text {
              font-size: 7rem;

              &.preset-name {
                font-weight: 600;
              }
            }
          }

          &.active {
            border: 1px solid #7c5dee;
          }

          &:hover {

          }

          .active-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            background: #7c5dee;
            padding: 7px;
            color: #FFF;
            border-radius: 50%;
            height: 24px;
            width: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #7c5dee;
          }

        }
      }

      .toggles {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        gap: 7px;
        justify-content: space-between;

        .dracula-toggle {
          --toggle-scale: 1 !important;
          position: relative;
          bottom: 0;
          right: 0;
          left: 0;
          top: 0;
          zoom: .8;

          &-wrap {
            line-height: normal;

            &.custom-toggle {
              margin-top: 15px;
            }
          }

        }

        .toggle-wrap {
          min-height: 80px;
          padding: 10px;
          border-radius: .5rem;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          cursor: pointer;
          background: rgba(#675ED5, .15);
          border: 1px solid rgba(#675ED5, .1);
          transition: all 0.2s ease-in-out;
          min-width: calc(50% - 7px);
          margin-bottom: .5rem;

          .index-label {
            font-size: 13px;
          }

          &:hover {
            background: #181a1b;
          }
        }

      }

      .excludes {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;

        .exclude-item {
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          width: 100%;

          input {
            flex: 1;
            height: 35px !important;
            margin-right: 10px;
            border: 1px solid #E5E5E5;
            border-radius: 5px;
            font-size: .875rem;
            box-shadow: none;
            padding: 0 10px;
            background: rgba(#675ED5, .15);
            color: #3E3C53;
            outline: none;

          }

          button {
            height: 35px;
            margin-top: 0;

            i {
              margin-right: 0;
            }
          }
        }

        & > button {
          width: 100%;
          height: 40px;
          text-transform: capitalize;
        }

        .btn-primary {
          color: #fff;
        }

      }

      &.field-color-presets {
        margin-top: 10px;
      }

      &.field-show-toggle,
      &.field-display-menu-toggle,
      &.field-darken-background-images,
      &.field-low-brightness-images,
      &.field-grayscale-images,
      &.field-invert-images,
      &.field-low-brightness-videos,
      &.field-grayscale-videos,
      &.field-show-tooltip,
      &.field-draggable-toggle,
      &.field-change-font {
        align-items: center;
        flex-flow: row-reverse;
        justify-content: flex-start;
        flex-wrap: wrap;

        & > .settings-field-label {
          width: auto !important;
          margin-right: auto;
          margin-bottom: 0;
          margin-top: 0;
        }

        & > .settings-field-content {
          margin-right: 10px;
          width: auto;
        }

      }

      &-inner {
        margin-top: 0;
        width: 100%;

        .settings-field {
          margin-bottom: 7px;
          padding: 5px 7px;
          border: 1px solid rgba(#675ED5, .1);
          border-radius: 7px;

          .settings-field-label {
            margin-bottom: 5px;
          }
        }
      }

      .image-replacements {
        h3 {
          font-size: .9rem;
          color: inherit;
          font-weight: normal;
          margin-bottom: 15px;
        }

        .image-replacements-group {
          background: rgb(#675ED5, .05);
          border-radius: 5px;
          padding: 5px;

          .group-item {
            width: 100%;
            flex: none;
            margin: 5px 0;

            .input-group {
              .img-preview {
                width: 60px;
                min-width: 50px;
                margin-right: 10px;
              }

              input {
                font-size: 12px;
                background: transparent;
                outline: none;
                color: #555;

                &::placeholder {
                  color: inherit;
                }
              }

              button {
                border: 1px solid #E5E5E5;
                padding: 10px;
                width: auto;

                &.select-image, &.select-video {
                  margin-right: 10px;
                  border-radius: 5px;
                }

                span {
                  display: none;
                }

                .dracula-btn-icon {
                  display: block;
                  margin-right: 0;
                }
              }

              &-append {
                background: #F5F5F5;

                .dracula-btn-icon {
                  background: $dracula_color_light;
                }

                &.select-video,
                &.select-image {
                  border-radius: 0;

                  &.active {
                    background: #f44336;
                    border-color: rgba(#f44336, .5);

                    &:hover {
                      opacity: .7;
                    }
                  }
                }

                &:hover {
                  background: $dracula_color_light;

                  .dracula-btn-icon {
                    background: #FFF;
                  }
                }
              }
            }

            &:nth-child(2) {
              overflow: hidden;

              input {
                background: #555;
                color: #FFF;
              }
            }

          }

          & > button {
            padding: 0;
            border: none;
            background: none;
            height: auto;
            margin: 5px 5px 5px auto;
            font-weight: normal;
            font-size: .875rem;
            outline: none;
            text-transform: capitalize;

            &.btn-danger {
              color: #f44336;
              opacity: .7;

              &:hover {
                opacity: 1;
              }
            }

            &.btn-primary {
              color: #7c5dee;
              opacity: .7;

              &:hover {
                opacity: 1;
              }
            }

          }

        }

        button {
          color: #FFF;
          text-transform: capitalize;
        }
      }

      .dracula-trigger-group {
        background: rgb(#675ED5, .05);
        border-radius: 5px;
        padding: 5px 10px;
        margin: 10px 0;

        .group-item {
          width: 100%;
          flex: none;
          margin: 7px 0;

          .input-group {
            display: flex;
            align-items: center;
            width: 100%;

            input {
              font-size: 12px;
              background: #FFF;
              outline: none;
              color: #555;
              flex: 1;
              height: 35px;
              border-radius: 5px;

              &::placeholder {
                color: inherit;
              }
            }

            button {
              border: 1px solid #E5E5E5;
              padding: 10px;
              width: auto;
              margin-left: 10px;
              height: 35px;

              span {
                display: none;
              }

              .dracula-btn-icon {
                display: block;
                margin-right: 0;
              }

              &.btn-danger {
                i {
                  margin: 0;
                }
              }
            }

            &-append {
              background: #F5F5F5;

              .dracula-btn-icon {
                background: $dracula_color_light;
              }

              &.select-video,
              &.select-image {
                border-radius: 0;

                &.active {
                  background: #f44336;
                  border-color: rgba(#f44336, .5);

                  &:hover {
                    opacity: .7;
                  }
                }
              }

              &:hover {
                background: $dracula_color_light;

                .dracula-btn-icon {
                  background: #FFF;
                }
              }
            }

            .components-base-control,
            .components-select-control {
              width: 100%;
            }

          }

        }

        & > button {
          padding: 0;
          border: none;
          background: none;
          height: auto;
          margin: 5px 5px 5px auto;
          font-weight: normal;
          font-size: .875rem;
          outline: none;
          text-transform: capitalize;

          &.btn-danger {
            color: #f44336;
            opacity: .7;

            &:hover {
              opacity: 1;
            }
          }

          &.btn-primary {
            color: #7c5dee;
            opacity: .7;

            &:hover {
              opacity: 1;
            }
          }

        }
      }

      .display-devices {
        display: flex;
        flex-wrap: wrap;
        column-gap: 5px;

        .components-base-control {
          border: 1px solid #ddd;
          border-radius: 5px;
          padding: 7px;
          cursor: pointer;

          .settings-field-label {
            margin: 0;
            line-height: 1;
          }

          &__field {
            margin-bottom: 0;
            display: flex;
            align-items: center;

            .components-checkbox-control__input {
              border-color: $dracula_color_light;
              background: transparent;
              outline: none;
              box-shadow: none;
              border-radius: 5px;

              &:checked {
                background: $dracula_color;
              }
            }

            svg {
              fill: #FFF;
            }

          }

          &:hover {
            background: #f5f5f5;
          }
        }

        .dracula-btn {
          background: transparent;
          border: none;
          padding: 0;
          color: #555;

          &-icon {
            background: #555;
          }

          span:last-child {
            display: none;
          }
        }

      }

      .sub-field-custom-presets {
        .settings-field {
          width: 100%;
        }
      }

    }

    /* width */
    &::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }

    /* Track */
    &::-webkit-scrollbar-track {
      background: #f1f1f1;
    }

    /* Handle */
    &::-webkit-scrollbar-thumb {
      background: #888;
    }

    /* Handle on hover */
    &::-webkit-scrollbar-thumb:hover {
      background: #555;
    }

  }

  .CodeMirror-hints {
    z-index: 9999 !important;
  }

  /**---- PROMO ----**/
  .dracula-pro-modal-wrap {
    position: absolute;
    background: rgba(0, 0, 0, .75);
    backdrop-filter: none;

    .dm-pro-modal {
      width: 100%;
      background: transparent;
      padding: 15px;

      img {
        width: 120px;
        margin-top: 0;
      }

      .dm-pro-title {
        font-size: 20px;
        margin-bottom: 10px;
      }

      h3, p {
        margin-bottom: 0;
        margin-top: 0;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        color: #FFF;
      }

      .dm-pro-actions {
        margin-top: 0;
        padding: 10px;
        flex-direction: column;
      }

      .dm-pro-offer {
        margin-top: 20px;
      }

      .dm-pro-timer {
        display: none;
      }

      .dm-pro-features {
        display: none;
      }


    }

  }

}

.CodeMirror-hints {
  z-index: 9999999 !important;
}

// Meta box
#poststuff {

  // Gutenberg Editor Meta box
  & > .postbox-container {
    #dark_mode_meta_box {
      h2 {
        white-space: nowrap;
        overflow: hidden;
        padding: 0 15px;
        font-size: 13px;
        font-weight: 500;
      }

      .inside {
        padding: 0;
        margin-top: 20px;

        .dracula-live-edit {
          margin-top: -15px;

          .color-presets {
            gap: 0;

            .color-preset {
              min-width: 100px;
            }
          }

          &-wrap {
            &:has(.dracula-pro-modal) {
              padding-top: 10px;
            }
          }

        }

        .dracula-live-edit-menu {
          &-item {
            font-size: .875rem;
          }
        }

        .dracula-settings-content {
          .settings-field {
            .settings-field-label {
              font-weight: normal;
            }

            &.field-page-specific-dark-mode {
              padding: 15px 10px;
            }
          }
        }

      }
    }
  }

  // Classic Editor Meta box
  & > .metabox-holder {
    #dark_mode_meta_box {

      .inside {
        margin-top: 0;
        padding: 0;

        .dracula-live-edit {
          .color-presets {
            gap: 0;

            .color-preset {
              min-width: 100px;
            }
          }
        }

      }
    }
  }

}

// Elementor Editor
#dracula-elementor-settings {

  .dracula-live-edit {
    border: 1px solid #ddd;
  }

  .dracula-live-edit-menu {
    border: none;
  }

  .dracula-settings-content {

    .settings-field {
      .components-button-group,
      .components-radio-group {
        button {
          padding: 7px;
          box-shadow: none !important;
          border: 1px solid #ddd;
          font-size: 13px;
        }
      }

      &:last-child {
        border-bottom: none;
      }

      &.field-page-specific-dark-mode {
        padding-top: 10px;
      }

      .components-range-control {
        .components-range-control__tooltip {
          display: none;
        }

        .dracula-range-control .components-number-control {
          margin-left: 10px !important;
        }

      }

      .components-select-control {
        .components-select-control__input {
          padding: 10px;
        }

        .components-input-control__suffix {
          display: none;
        }
      }

      .dracula-select {
        span[aria-live="polite"] {
          display: none;
        }

        &__control {
          display: flex;
          align-items: center;
          height: 35px;
          padding: 10px;
          border-radius: 5px;
        }

        &__placeholder {
          position: absolute;
        }

        &__value-container {
          flex: 1;
        }

      }

    }
  }

}

// Dark Mode
html[data-dracula-scheme="dark"] {
  .dracula-live-edit {
    border: 1px solid lighten(#44475a, 20%);
    background: #44475a;

    .dracula-live-edit-header {
      background: #282a36;
      color: #f8f8f2;
      border-color: #44475a;

      .customize-type-wrap {
        .selected-type {
          background: #44475a;
          color: #f8f8f2;
          border-color: lighten(#44475a, 10%);
        }

        .customize-types {
          background: #44475a;
          border-color: #44475a;

          .type-item {
            color: #f8f8f2;
            border-color: lighten(#44475a, 10%);

            &:hover {
              background: #44475a;
            }

            .item-content {
              .item-label {
                color: #f8f8f2;
              }

              .item-description {
                color: darken(#f8f8f2, 10%);
              }

            }

          }
        }

        .dracula-tooltip {
          background: #44475a;
          color: #f8f8f2;
          border-color: lighten(#44475a, 10%);
        }

      }
    }

    &-menu {
      background: lighten(#282a36, 10%);

      &-item {
        background: lighten(#282a36, 10%);
        color: #f8f8f2;
        border-color: #44475a;

        &.active,
        &:hover {
          background: lighten(#44475a, 5%);
        }
      }
    }

    .dracula-settings-content {
      background: lighten(#282a36, 10%);
      color: #f8f8f2;
      border-color: #44475a;

      /* Track */
      &::-webkit-scrollbar-track {
        background: #888;
      }

      /* Handle */
      &::-webkit-scrollbar-thumb {
        background: #f1f1f1;
      }

      /* Handle on hover */
      &::-webkit-scrollbar-thumb:hover {
        background: darken(#f1f1f1, 5%);
      }

      .settings-field {
        border-color: #44475a;

        h3 {
          color: #f8f8f2;
          font-family: "Open Sans", sans-serif;
          font-weight: 700;
        }

        .settings-field-label {
          color: #f8f8f2;
          font-family: "Open Sans", sans-serif;
        }

        .components-form-toggle {
          background: transparent;

          &:not(.is-checked) {
            .components-form-toggle__track {
              background: #44475a;
            }
          }
        }

        .display-devices {
          .components-base-control {
            border-color: lighten(#44475a, 20%);

            &:hover {
              background: #44475a;
            }
          }

          .dracula-btn-icon {
            background: #f8f8f2;
          }
        }

        .excludes {
          .exclude-item {
            input {
              background: #44475a;
              color: #f8f8f2;
              border-color: lighten(#44475a, 20%);
            }
          }
        }

        .dracula-color-palette {
          background: #44475a;
          border-color: lighten(#44475a, 20%);
          color: #f8f8f2;
        }

        .dracula-range-control {
          .components-range-control__reset {
            background: #44475a;
            text-transform: capitalize;
          }
        }

        .dracula-radio-group {
          border: none;
          padding: 0;
          background: none;

          button {
            color: darken(#f8f8f2, 5%);
          }

        }

        // React Select
        .dracula-select {
          &__control {
            background: #44475a;
            color: #f8f8f2;
            border-color: lighten(#44475a, 20%);
          }

          &__menu {
            background: #44475a;
            color: #f8f8f2;
            border-color: lighten(#44475a, 20%);
          }

          &__option {
            background: #44475a;
            color: #f8f8f2;
            border-bottom: 1px solid lighten(#44475a, 5%);
          }

          &__single-value {
            color: #f8f8f2;
          }

        }

        // Select Control
        .components-select-control {
          .components-input-control__container {
            background: #44475a;
          }

          .components-select-control__input {
            //color: #f8f8f2;
          }

          .components-input-control__suffix {
            svg {
              fill: #f8f8f2;
            }
          }

          .components-input-control__backdrop {
            border: 1px solid lighten(#44475a, 5%);
          }

        }

        // Text Control
        .components-text-control__input {
          background: #44475a;
          color: #f8f8f2;
          border-color: lighten(#44475a, 20%);
        }

      }

      .inner-tabs {
        .tab-item {
          color: #f8f8f2;
        }
      }

    }

    .image-replacements {
      .image-replacements-group {
        border: 1px solid lighten(#44475a, 5%);
      }

      .group-item {
        &:first-child {
          .input-group {
            input {
              background: #f8f8f2 !important;
            }
          }
        }

        .input-group {
          input {
            background: #44475a;
            color: #f8f8f2;
            border-color: lighten(#44475a, 20%);
          }
        }
      }
    }

    // Editor
    &.dracula-editor-live-edit {

      .dracula-live-edit-menu {
        border-color: lighten(#44475a, 20%) !important;
      }

      .dracula-settings-content {
        .inner-tabs {
          border-bottom: none;
        }

        .settings-field {
          border-color: lighten(#44475a, 20%);
          background: #44475a;

          .components-base-control__field {
            .components-button-group,
            .components-radio-group {
              button {
                background: #44475a;
                color: #f8f8f2;
                border-color: #44475a;
              }
            }
          }
        }
      }
    }

  }

  // Meta box
  #poststuff {

    // Gutenberg Editor Meta box
    & > .postbox-container {
      #dark_mode_meta_box {
        .inside {
          .dracula-settings-content {
            .settings-field {
              background: #282a36;

              &.field-page-specific-dark-mode {
                background: #282a36;
              }
            }
          }
        }
      }
    }
  }

}