$primary_color: #675ed5;

body.toplevel_page_dracula {
  #wpcontent {
    padding-left: 0;
  }

  #wpbody-content {
    padding: 0;
  }

  #footer-thankyou,
  #footer-upgrade {
    display: none;
  }
}

.dracula-settings {
  @import "settings/image-replacement";
  @import "settings/toggles";

  display: flex;
  flex-wrap: wrap;
  min-height: calc(100vh - 32px);

  @media (max-width: 767px) {
    flex-direction: column;
  }

  &,
  * {
    box-sizing: border-box;
  }

  &-menu {
    display: flex;
    flex-direction: column;
    background: #fff;
    width: 25%;
    max-width: 300px;
    overflow: hidden;
    border: 1px solid #eee;
    padding: 20px 0;

    .menu-header {
      text-align: center;
      border-bottom: 1px solid #eee;
      padding-bottom: 15px;
      position: relative;

      .menu-title {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        margin-bottom: 5px;

        img {
          width: 32px;
          margin-right: 10px;
        }

        .plugin-name {
          font-size: 1.2rem;
          font-weight: 600;
          line-height: 1.5;
        }

        .plugin-version {
          margin-left: 7px;
        }
      }
    }

    .menu-item {
      display: flex;
      align-items: center;
      padding: 10px 12px;
      font-size: 1rem;
      cursor: pointer;
      transition: all 0.2s ease-in-out;
      color: #555;
      border-bottom: 1px solid #eee;

      img {
        margin-right: 10px;
        width: 28px;
        height: 28px;
      }

      .dracula-pro-icon {
        position: unset;
        margin-left: auto;

        i {
          margin-right: 0;
        }
      }

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

      &.active {
        background: rgba($dracula_color, 0.1);
        color: $dracula_color;
        border-right: 3px solid $dracula_color;
        font-weight: 500;

        .menu-item-icon {
          img {
            filter: grayscale(0);
          }
        }
      }

      &:hover:not(.active) {
        color: $dracula_color;

        .menu-item-icon {
          img {
            filter: grayscale(0);
          }
        }
      }
    }

    @media (max-width: 767px) {
      width: 100%;
      max-width: 100%;
      border: none;
      border-bottom: 1px solid #eee;
    }
  }

  &-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-left: 20px;
    margin-right: 20px;

    &-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 1.2rem;
      margin-bottom: 15px;
      background: #fff;
      width: calc(100% + 40px);
      padding: 15px 20px;
      margin-left: -20px;
      position: sticky;
      top: 32px;
      z-index: 9;
      border: 1px solid #eee;
      border-left: 0;

      .header-title {
        display: flex;
        align-items: center;
        font-size: 1.3rem;
        font-weight: 500;
        line-height: 1.5;

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

      .header-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-left: auto;

        a {
          text-decoration: none;
          margin-right: 20px;
          color: #555;
          font-size: 0.875rem;
          font-weight: 500;
          transition: all 0.2s ease-in-out;
          cursor: pointer;
          background: #fff;
          border: 1px solid $dracula_color;

          &:hover {
            color: #fff;
            border-color: $dracula_color_light;
            background: $dracula_color;
          }

          &:last-child {
            margin-right: 0;
          }
        }
      }

      @media (max-width: 767px) {
        flex-direction: column;
        padding: 10px;
        top: -43px;

        .header-title {
          margin-top: 0;
          margin-bottom: 10px;
        }

        .header-actions {
          margin-left: unset;
        }
      }
    }

    .inner-tabs {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      padding: 16px;
      border-bottom: 1px solid #e6e7fd;
      position: sticky;
      top: 104px;
      z-index: 9;
      border-radius: 10px;
      background: #fff;

      .tab-item {
        font-size: 0.875rem;
        margin-right: 10px;
        padding: 10px;
        border-radius: 5px;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
        color: #675ed5;
        font-weight: 500;
        background: #e8e7f8;
        border-color: $dracula_color_light;

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

        &:hover {
          color: #fff;
          border-color: $dracula_color_light;
          background: $dracula_color;

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

        &.active {
          background: $dracula_color;
          color: #fff;

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

      .btn-info {
        margin-left: auto;
      }

    }

    .settings-field {
      display: flex;
      align-items: flex-start;
      padding: 1rem;
      background: #fff;
      border-radius: 10px;
      border: 1px solid #eee;
      margin-bottom: 1rem;
      flex-wrap: wrap;
      width: 100%;
      position: relative;

      &.pro-feature {
        & > .settings-field-content {
          & > div:first-child {
            width: max-content;
          }
        }
      }


      & > .settings-field-label {
        width: 200px;
        display: flex;
        align-items: center;
        font-size: 0.875rem;
        font-weight: 600;
        gap: 5px;

        &:after {
          content: ":";
          margin-left: auto;
        }
      }

      &-content {
        margin-left: 1.5rem;
        display: flex;
        flex-direction: column;
        flex: 1;
        position: relative;

        .button-styles {
          display: flex;
          flex-wrap: wrap;

          .button-style-wrap {
            display: inline-flex;
            margin: 8px 9px;
            border-radius: 8px;
            border: 3px solid transparent;
            position: relative;

            &.disabled {
              .reading-mode-button {
                opacity: 0.5;
              }
            }
          }

          @media (max-width: 767px) {
            .button-style-wrap {
              margin: 8px 6px;
            }
          }
        }

        .checkbox-wrap {
          display: inline-flex;
          flex-wrap: wrap;

          .components-base-control {
            margin-right: 10px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;

            &.disabled {
              opacity: 0.5;
            }

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

              .components-checkbox-control__input-container {
                width: 20px;
                height: 20px;

                input {
                  border-radius: 4px;
                  width: 20px;
                  height: 20px;
                  border: 1px solid $primary_color;

                  &:checked {
                    background-color: $primary_color;
                  }
                }
              }

              label {
                font-size: 1rem;
              }
            }
          }

          &.tool-options {
            .components-base-control {
              margin-right: 30px;
              margin-bottom: 20px;
              width: 30%;
            }

            .tool-option {
              &.disabled {
                opacity: 0.5;
              }
            }

            @media (max-width: 767px) {
              flex-direction: column;

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

        .dracula-color-palette2 {
          max-width: 100%;
          position: relative;

          legend {
            display: none;
          }

          .components-dropdown {
            width: max-content;

            button {
              width: 100px;
              height: 40px;
              border-radius: 10px;

              .components-truncate {
                display: none;
              }

              .components-color-palette__custom-color-value {
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
              }
            }
          }

          .components-circular-option-picker__custom-clear-wrapper {
            position: absolute;
            margin: 0;
            left: 115px;
            top: 8px;

            button {
              color: #675ed5;
              background: #fff;
              border: 1px solid rgba(#675ed5, 0.25);
              box-shadow: none;
              font-size: 0.875rem;
              height: 32px;
              width: 60px;
              text-align: center;
              border-radius: 5px;
              padding: 5px 12px;

              &:hover {
                color: #fff;
                background: #675ed5;
                border: 1px solid rgba(#675ed5, 0.25);
              }
            }
          }

          .components-circular-option-picker__option {
            &:before,
            &:after {
              width: auto;
              height: auto;
            }
          }

          &.disabled {
            opacity: 0.5;
          }
        }

        .upload-icon {
          display: inline-flex;
          margin-top: 1rem;
          width: max-content;

          &-preview {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: 100px;
            height: 100px;
            padding: 10px;
            margin-top: 1rem;
            border: 1px solid rgba(#675ed5, 0.5);
            background: #fff;
            border-radius: 5px;

            img {
              max-width: 100%;
            }
          }

          button.btn-danger {
            border: 1px dashed #f00;
            color: #f00;
            margin-left: 10px;
            background: #fff;

            &:hover {
              border: 1px dashed #fff;
              background: #f00;
              color: #fff;
            }
          }
        }

        .upload-btn {
          border: 1px dashed #675ed5;
          color: #675ed5;
          background: #fff;

          &.disabled {
            opacity: 0.5;
          }

          &:hover {
            border: 1px dashed #fff;
            color: #fff;
            background: #675ed5;
          }
        }

        .description {
          margin-top: 0.5rem;
          font-weight: 400;
          margin-bottom: 10px;
        }

        .live-edit-msg {
          a {
            color: #7c5dee;
            border: 1px solid;
            text-decoration: none;
            padding: 5px;
            border-radius: 3px;
            cursor: pointer;
            margin-right: 7px;

            &:hover {
              background: #7c5dee;
              color: #fff;
            }
          }

          .dashicons-editor-help {
            margin-left: 10px;
          }

          .__react_component_tooltip {
            width: 200px;
            text-align: center;
          }
        }

        .active-badge {
          position: absolute;
          top: -8px;
          right: -8px;
          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;
        }

        &.disabled {
          opacity: 0.5;
        }

        .dracula-range-control {
          width: 400px !important;
          max-width: 100%;
          margin-bottom: 1rem;

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

          .components-range-control__mark {
            top: -6px;

            &-label {
              top: 26px;
              font-size: 14px;
              left: 14px;

              &:last-child {
                left: calc(100% - 14px);
              }
            }
          }

          .components-range-control__wrapper {
            margin-bottom: 0;
          }

          .components-range-control__slider {
            & + span {
              height: 7px;
            }
          }

          .components-range-control__track {
            background-color: $primary_color;
            height: 7px;

            & + span {
              height: 15px;
              width: 15px;

              & > span {
                background-color: $primary_color;
              }
            }
          }

          .components-range-control__mark {
            display: none;
          }

          .components-input-control__container {
            border-radius: 7px;

            .components-input-control__backdrop {
              border-color: rgba(#675ed5, 0.5);
            }
          }

          .components-range-control__reset {
            color: #675ed5;
            background: #fff;
            border: 1px solid rgba(#675ed5, 0.25);
            box-shadow: none;
            font-size: 0.875rem;
            height: 32px;
            width: 60px;
            text-align: center;
            border-radius: 5px;
            padding: 5px 12px;
            margin-top: 4px;

            &:hover {
              color: #fff;
              background: #675ed5;
              border: 1px solid rgba(#675ed5, 0.25);
            }
          }

          .components-range-control__tooltip {
            background-color: $primary_color;
            bottom: 100%;
            font-size: 0.875rem;

            &:after {
              top: 100%;
              left: 50%;
              border: solid transparent;
              content: " ";
              height: 0;
              width: 0;
              position: absolute;
              pointer-events: none;
              border-color: rgba(136, 183, 213, 0);
              border-top-color: $primary_color;
              border-width: 5px;
              margin-left: -5px;
            }
          }

          .components-number-control {
            margin-left: 30px !important;
          }

          &.disabled {
            opacity: 0.5;
            pointer-events: none;
          }
        }

        .components-circular-option-picker {
          display: flex !important;
          justify-content: space-between;
        }

        .settings-sub-field {
          border: 1px solid #eee;
          border-radius: 10px;
          margin: 0;

          .settings-field {
            border: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding: 0 20px;

            &-label {
              margin-top: 0;
              margin-bottom: 16px;

              &:after {
                display: none;
              }
            }

            &-content {
              margin-left: 0;
            }

            .description {
              margin-bottom: 0;
            }
          }

          &.sub-field-presets {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .field-color-presets {
              width: 100%;
              margin-top: 10px;
              margin-bottom: 20px;

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

              .description {
                margin-bottom: 15px;
              }
            }
          }

          &.sub-field-custom-presets {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .settings-field {
              width: calc(50% - 20px);
              border: 1px solid #eee;
              margin: 7px 10px;
              padding: 10px;
              background: #f9f9f9;

              &.field-custom-presets {
                width: 100%;
                margin-top: 10px;
                margin-bottom: 20px;
              }

              &.field-preset-name {
                width: 100%;
              }
            }
          }
        }

        .custom-presets-wrap {
          .custom-presets-item {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            align-content: center;
            gap: 16px;

            .color-preset {
              cursor: pointer;
              position: relative;
              display: flex;
              justify-content: center;
              align-items: center;

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

              span {
                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 span {
                opacity: 1;
              }

              svg {
                width: 100%;
                height: 100%;
                border-radius: 10px;

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

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

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

        .dracula-trigger-group {
          display: flex;
          flex-wrap: wrap;
          align-items: flex-end;
          justify-content: space-between;
          margin-bottom: 1.2rem;
          width: 100%;

          .group-item {
            display: flex;
            flex-direction: column;
            flex: 1;
            margin-right: 20px;

            &-header {
              display: flex;
              flex-direction: column;
              margin: 7px 5px;
            }

            .input-group {
              width: 100%;
              display: flex;
              align-items: flex-start;
              flex-wrap: nowrap;

              input {
                width: 100%;
                border: 1px solid #ddd;
                padding: 0.5rem;
                height: 40px;
                border-radius: 7px;

                &.pro-feature {
                  opacity: 0.5;
                }
              }

              .components-base-control {
                width: 100%;

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

                  .dracula-select {
                    width: 100% !important;

                    &.pro-feature {
                      opacity: 0.5;
                    }
                  }
                }
              }
            }
          }

          .btn-danger {
            margin-left: 15px;

            &.pro-feature {
              opacity: 0.5;
            }

            i {
              margin: 0;
            }
          }
        }
      }

      &-sub {
        display: flex;
        flex-direction: column;
        margin-top: 5px;
        width: 100%;

        .settings-field {
          flex-direction: column;
          align-items: flex-start;
          padding: 15px;
          border-style: dashed;
          width: auto;
          margin-left: 220px;

          .settings-field-label {
            width: 100%;
            margin-bottom: 10px;
            margin-top: 0;

            &:after {
              display: none;
            }
          }

          .settings-field-content {
            margin-left: 0;

            .description {
              &:last-child {
                margin-bottom: 0;
              }
            }

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

          &:last-child {
            margin-bottom: 0;
          }
        }
      }

      &.field-adjustments {
        position: relative;

        & > .settings-field-label {
          width: 100%;
          margin-bottom: 1rem;
          font-size: 1rem;
          margin-top: 10px;

          &:after {
            content: "";
          }
        }

        .live-edit-btn {
          top: 20px;
          right: 20px !important;
        }

        .settings-field-content {
          margin-left: 0;
          margin-top: 10px;

          .settings-field {
            border-radius: 0;
            margin-bottom: 0;
            border: none;
            border-bottom: 1px dashed #ddd;

            &-label {
              margin-right: 20px;
              display: flex;
              align-items: center;

              svg {
                margin-right: 3px;
              }
            }

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

      &-inner {
        width: 100%;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 10px;

        .settings-field {
          border-bottom: 1px solid #eee;
          margin-bottom: 10px;

          .settings-field-label {
            width: 180px;
          }
        }
      }

      .dracula-range-control {
        width: 400px;
        max-width: 100%;

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

        .components-range-control__mark {
          top: -6px;

          &-.settings-field-label {
            top: 20px;
          }
        }

        .components-range-control__wrapper {
          margin-bottom: 0;
        }

        @media (max-width: 767px) {
          width: 100%;
        }
      }

      .dracula-radio-group {
        @media (max-width: 767px) {
          width: max-content;
          padding: 5px 3px;

          button {
            padding: 5px;
          }
        }
      }

      .dracula-select {
        width: 400px !important;
        max-width: 100%;
        z-index: 2;

        &:has(.dracula-select__menu) {
          z-index: 3;
        }

        &.select-font-family {
          .dracula-select__option {
            font-size: 1rem;
          }
        }

        &__input {
          box-shadow: none !important;
        }

        @media (max-width: 767px) {
          width: 100%;
        }
      }

      .dracula-textarea {
        width: 400px;
        max-width: 100%;

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

          textarea {
            border-radius: 0.5rem;
            border: 1px solid #ddd;
          }
        }
      }

      .dracula-btn {
        max-width: max-content;

        &.pro-feature {
          opacity: 0.5;
        }
      }

      &.custom-css {
        flex-direction: column;
        align-items: flex-start;

        .settings-field-label {
          width: 100%;
          margin: 0;

          &:after {
            display: none;
          }
        }

        .description {
          margin-bottom: 1rem;
        }

        .settings-field-content {
          margin-left: 0;
          width: 100%;

          .live-edit-btn {
            top: -15px;
          }
        }

        .CodeMirror-scroll {
          max-width: 100%;
          border-radius: 0.5rem;
          border: 1px solid #ddd;
          box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
          padding: 0;

          &,
          * {
            box-sizing: border-box;
          }
        }
      }

      .color-presets {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;

        .color-preset {
          display: flex;
          flex-direction: column;
          align-items: center;
          cursor: pointer;
          border-radius: 15px;
          min-width: 200px;
          position: relative;

          svg {
            width: 100%;
            height: 100%;
            border-radius: 10px;

            text {
              font-size: 6rem;

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

          &.active {
            border: 2px solid $dracula_color;
            background: $dracula_color;
          }

          &:hover {
          }

          .pro-label {
            text-transform: uppercase;
            font-size: 13px;
            padding: 5px 7px;
            display: inline-flex;
            align-items: center;
            border-radius: 15px;

            i {
              width: 16px;
              height: 16px;
              margin-right: 3px;
            }

          }
        }

        @media (max-width: 767px) {
          gap: 10px;

          .color-preset {
            min-width: unset;
            width: calc(50% - 5px);
          }
        }
      }

      .excludes-except {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 1rem;

        span {
          font-weight: 600;
        }

        .exclude-all-label {
          margin-right: 1rem;
        }

        .exclude-except-label {
          margin: 0 1rem;
        }
      }

      .time-based-mode-settings {
        display: flex;
        align-items: center;
        margin: 10px 0;

        span {
          font-size: 0.875rem;
          font-weight: 500;
          margin-right: 7px;
        }

        input {
          margin-right: 15px;
          height: 40px;
        }
      }

      .live-edit-btn {
        text-decoration: none;
        color: $dracula_color;
        background: #fff;
        border: 1px solid $dracula_color_light;

        &.floating {
          position: absolute;
          right: 0;
        }

        &:hover {
          background: $dracula_color;
          color: #fff;
          border-color: $dracula_color_light;
        }

        @media (max-width: 767px) {
          padding: 5px 7px;

          &.floating {
            top: -35px;
          }
        }
      }

      &.toggle-style {
        flex-direction: column;
        align-items: flex-start;

        .settings-field-label {
          width: 100%;
          justify-content: space-between;
          margin-top: 0;
          margin-bottom: 0;

          &:after {
            display: none;
          }
        }

        .description {
          margin-bottom: 1rem;
        }

        .settings-field-content {
          margin-left: 0;
        }

        .live-edit-btn {
          top: -20px;
        }
      }

      &.field-color-presets {
        flex-direction: column;
        align-items: flex-start;

        .settings-field-label {
          width: 100%;
          justify-content: space-between;

          &:after {
            display: none;
          }
        }

        .description {
          margin-bottom: 1rem;
        }

        .settings-field-content {
          margin-left: 0;
        }
      }

      .excludes {
        display: flex;
        flex-direction: column;

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

          input {
            height: 35px;
            width: 200px;
            margin-right: 10px;
            border-color: #ddd;
            border-radius: 5px;
          }

          button {
            height: 35px;

            i {
              margin-right: 0;
            }
          }
        }

        @media (max-width: 767px) {
          .exclude-item {
            input {
              width: auto;
              flex: 1;
            }
          }
        }
      }

      &.field-image-replacement,
      &.field-video-settings {
        p {
          margin-right: 100px;
        }

        .settings-field-content {
          margin-left: 0;
        }
      }

      &.field-input-color,
      &.field-button-color {
        .settings-field-sub {
          margin-top: -50px;
        }
      }

      .display-devices,
      .posttype-options,
      .display-options {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        width: auto !important;

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

          &__field {
            margin-bottom: 0;

            .components-checkbox-control__input {
              border-color: $dracula_color_light;

              &:checked {
                background: $dracula_color;
              }
            }
          }

          &:hover {
            background: #f2f2f2;
          }
        }

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

          &-icon {
            background: #555;
          }
        }
      }

      @media (max-width: 767px) {
        .display-devices,
        .posttype-options,
        .display-options {
          gap: 0;
        }
      }

      &.pro-feature {
        .components-form-toggle,
        .dracula-radio-group,
        .dracula-button-group,
        .dracula-range-control,
        .dracula-select__control,
        .add-exclude,
        .add-group,
        .dracula-color-palette,
        .components-base-control {
          opacity: 0.5;
        }

        .toggle-wrap,
        .color-preset {
          &.disabled {
            > *:not(.pro-label) {
              opacity: 0.5;
            }
          }
        }

        .CodeMirror {
          opacity: 0.5;
          pointer-events: none;
        }

        .image-replacements-group {
          .group-item {
            opacity: 0.5;
            pointer-events: none;
          }
        }
      }

      &.field-transition-animation {
        .transition-animation-preview-wrap {
          position: relative;
          width: 300px;
          height: 200px;
          border: 1px dashed #e9e9e9;
          border-radius: 7px;
          margin-top: 30px;

          .browser-header {
            display: flex;
            align-items: center;
            background-color: #e9e9e9;
            padding: 10px 12px;
            border-radius: 8px 8px 0 0;
            position: absolute;
            width: 100%;
            top: -29px;
          }

          .browser-header-dot {
            display: inline-block;
            width: 12px;
            height: 12px;
            background-color: #ff5f56;
            border-radius: 50%;
            margin-right: 5px;
          }

          .browser-header-dot:nth-child(2) {
            background-color: #ffbd2e;
            /* Yellow for the middle dot */
          }

          .browser-header-dot:nth-child(3) {
            background-color: #27c93f;
            /* Green for the right-most dot */
          }
        }

        .transition-animation-preview-inner {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: #555;
          border-radius: 0 0 7px 7px;
        }
      }

      &.field-menu-toggle-placement {

        .settings-field-content {
          border: 1px solid #eee;
          border-radius: 10px;
          padding: 20px;
          background: #f9f9f9;

          img,
          iframe {
            max-width: 576px;
            width: 100%;
            aspect-ratio: 16/9;
            border-radius: 10px;
          }

          h3 {
            margin-top: 0;
            margin-bottom: 10px;
          }

          a {
            background: transparent;
            border: 1px solid $dracula_color;
            color: $primary_color;
            display: inline-flex;
            padding: 10px 15px;
            gap: 5px;
            margin-top: 20px;
            line-height: 1.5;
            background: #FFF;

            &.learn-more-btn {
              color: #fff;
              background: $dracula_color;
              border: 1px solid $dracula_color_light;

              &:hover {
                color: $dracula_color;
                background: #FFF;
                border-color: $dracula_color_light;
              }

            }

            &:hover {
              background: $dracula_color;
              color: #fff;
            }

          }

          .toggle-placement-actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
          }

        }

      }

    }

    .reading-mode-exclude {
      .settings-field-content {
        > .settings-wrap {
          > .dracula-select {
            width: 600px !important;
          }
        }
      }
    }

    .align-base {
      align-items: baseline;
    }

    .settings-fields-wrap {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;

      .settings-fields {
        display: flex;
        flex-direction: column;
        flex: 1;

        .btn-icons {
          display: flex;
          flex-wrap: wrap;

          .btn-icon {
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            transition: all 0.2s ease-in-out;
            height: 30px;
            width: 30px;

            &.disabled {
              opacity: 0.5;
            }

            &:not(.btn-none) {
              background-color: $primary_color;
            }

            &-wrap {
              width: 60px;
              height: 60px;
              margin: 7px;
              padding: 15px;
              border-radius: 5px;
              background: #fff;
              color: $primary_color;
              font-size: 1rem;

              &.disabled {
                opacity: 0.5;
              }

              &.active {
                background: $primary_color;
                color: #fff;

                &:hover {
                  background: $primary_color;
                }

                .btn-icon {
                  &:not(.btn-none) {
                    background-color: #fff;
                  }
                }
              }

              &:hover {
                background: rgba(#675ed5, 0.1);
              }
            }
          }
        }
      }

      .button-preview {
        border: 1px solid #ddd;
        border-radius: 16px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-width: 280px;
        margin-left: 30px;
        position: sticky;
        top: 200px;
        overflow: hidden;
        background-color: #fff;

        .button-preview-title {
          display: flex;
          font-size: 14px;
          background: #dbd8f2;
          width: 100%;
          color: #0e0b28;
          padding: 8px 1rem;
          text-align: center;
          font-weight: 600;

          div {
            margin-right: 30px;

            .browser-header-dot {
              display: inline-block;
              width: 12px;
              height: 12px;
              background-color: #ff5f56;
              border-radius: 50%;
              margin-right: 5px;
            }

            .browser-header-dot:nth-child(2) {
              background-color: #ffbd2e;
              /* Yellow for the middle dot */
            }

            .browser-header-dot:nth-child(3) {
              background-color: #27c93f;
              /* Green for the right-most dot */
            }
          }

          i {
            margin-right: 7px;
          }

          .icon-eye {
            background-color: #0e0b28;
          }
        }

        &-body {
          padding: 30px;
          display: flex;
          justify-content: center;
          align-items: flex-start;
          flex-wrap: nowrap;
          gap: 24px;
          flex-direction: column;

          .mb-6 {
            margin-bottom: 6px;
          }

          p {
            width: 100%;
            display: flex;
            justify-content: var(--reading-mode-button-alignment) !important;
          }
        }

        @media (max-width: 767px) {
          margin-left: 0;
          margin-top: 30px;
          width: 100%;
        }
      }
    }

    .dracula-placeholder {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      padding: 20px 24px;
      margin: 20px 0;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
      display: flex;
      flex-direction: column;
      gap: 16px;

      &__label {
        display: flex;
        align-items: center;
        font-size: 15px;
        font-weight: 600;
        color: #111827;

        .dashicons {
          margin-right: 8px;
          font-size: 18px;
          color: #2563eb; // WordPress blue
        }
      }

      &__instructions {
        font-size: 14px;
        line-height: 1.6;
        color: #374151;

        p {
          margin: 0;
        }
      }

      &__actions {
        margin-top: 4px;

        .button {
          display: inline-flex;
          align-items: center;
          font-size: 13px;
          font-weight: 500;
          padding: 6px 14px;
          border-radius: 6px;
          text-decoration: none;

          &.button-primary {
            background: linear-gradient(135deg, #4f46e5, #6366f1);
            border: none;
            color: #fff;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);

            &:hover {
              background: linear-gradient(135deg, #4338ca, #4f46e5);
            }
          }
        }
      }
    }

    @media (max-width: 1279px) {
      .reading-mode-exclude {
        .settings-field-content {
          > .settings-wrap {
            > .dracula-select {
              width: 100% !important;
            }
          }
        }
      }

      .dracula-settings-content {
        .settings-field {
          .excludes-except {
            .settings-wrap {
              margin-top: 15px;
            }
          }
        }
      }

      .settings-field-content {
        .checkbox-wrap.tool-options {
          .components-base-control {
            width: 40%;
          }
        }
      }

      .settings-fields-wrap {
        .button-preview {
          width: 100%;
          margin: 0;
        }
      }

      .excludes-except {
        .settings-wrap {
          margin-top: 10px;
        }
      }
    }

    @media (max-width: 991px) {
      .reading-mode-exclude {
        .settings-field-content {
          > .settings-wrap {
            > .dracula-select {
              width: 100% !important;
            }
          }
        }
      }

      .settings-field-content {
        .checkbox-wrap.tool-options {
          .components-base-control {
            width: 100%;
          }
        }
      }

      .settings-fields-wrap {
        .button-preview {
          width: 100%;
          margin: 0;
        }
      }

      .excludes-except {
        .settings-wrap {
          margin-top: 10px;
        }
      }
    }

    @media (max-width: 767px) {
      .inner-tabs {
        position: static;
        flex-wrap: wrap;
        gap: 10px 0;
      }

      .settings-field {
        flex-direction: column;
        align-items: flex-start;

        > .settings-field-label {
          width: 100%;
          margin-bottom: 10px;
          margin-top: 0;

          &:after {
            display: none;
          }
        }

        .settings-field-content {
          margin-left: 0;
          width: 100%;
        }

        &-sub {
          .settings-field {
            margin-left: 0;
            padding: 0;
            border-top: none;
            border-left: none;
            border-right: none;
          }
        }

        .time-based-mode-settings {
          flex-direction: column;
          align-items: flex-start;

          span {
            margin-top: 10px;
            margin-bottom: 7px;
          }
        }

        .display-devices {
          gap: 10px;
        }

        .excludes-except {
          .exclude-except-label {
            width: 100%;
            margin-left: 0;
            margin-bottom: 7px;
          }

          .settings-wrap {
            width: 100%;
          }
        }
      }
    }
  }

  @media (max-width: 767px) {
    &-content {
      overflow: hidden;
      width: 100%;
      margin: 0;
      padding: 0 20px;
    }
  }

  .live-edit-btn {
    &.disabled {
      & > *:not(.dracula-tooltip) {
        opacity: 0.5;
      }
    }
  }

}