.agsdi-gutenberg-insert-modal {
  border        : none !important;
  border-radius : 4px;
  overflow      : hidden;
  box-shadow    : $boxShadow;
  font-family   : "Open Sans", sans-serif;

  .mce-agsdi-icon-preview .agsdi-icon-preview {
    overflow: visible;
  }

  .mce-agsdi-icon-preview {
    overflow: hidden;
    align-self: stretch;

    span {
      width: 128px;
      height: 128px;
    }
  }

  .components-modal__content {
    padding : 0px;

    &:before {
      margin-bottom : 0px;
      }
    }

  .components-button.is-secondary,
  .components-button.is-primary {
    @include button();
    @include sizeButtonMixin(medium);
    min-width  : 100px;
    text-align : center;
    display    : block;
    }

  .components-button.is-primary {
    @include colorButtonMixin(purple);
    }

  .components-button.is-secondary {
    @include colorButtonMixin(grey);
    text-align : center;
    display    : block;

    }

  .gb-agsdi-icon-color-picker {
    display        : flex;
    align-items    : flex-start;
    flex-direction : row;
    flex-wrap      : wrap;

    > * {
      flex : 1 1 0;
      }

    label {
      min-width : 100px;
      }

    .components-color-palette__custom-color {
      max-height    : 30px;
      padding       : 5px 10px;
      border-radius : 5px 0px 0px 5px;

      .components-color-palette__custom-color-name {
        display : none;
        }

      }


    .components-dropdown {
      position : relative;
      }

    .components-popover {
      position    : absolute;
      margin-left : -65px;
      top         : 0px;
      left        : 0px;

      .components-popover__content {
        position : static;
        }

      }


    .components-circular-option-picker__swatches {
      gap           : 5px;
      margin-bottom : 5px;

      .components-circular-option-picker__option-wrapper {
        height : 24px;
        width  : 24px;
        }

      .components-circular-option-picker__option {
        &:focus::after {
          border : 0px solid #757575;
          height : 26px;
          width  : 26px;
          }

        &.is-pressed + svg {
          left : 0px;
          top  : 0px;
          }

        &.components-button.is-pressed:focus:not(:disabled) {
          box-shadow : unset;
          }

        }

      }

    // clear
    .agsdi-gutenberg-insert-modal-clear-btn.components-button.is-secondary {
      padding       : 5px !important;
      font-weight   : 500;
      font-size     : 12px;
      display       : inline-block;
      max-width     : 80px;
      border-radius : 0px 5px 5px 0px;

      &:hover {
        padding : 5px !important;
        }

      }

    }

  .mce-agsdi-icon-picker.gb-agsdi-icon-picker {
    .gb-agsdi-icon-type label,
    .gb-agsdi-icon-set label {
      display : none;
      }

    .components-input-control__container {
      margin-left : 0px;
      }
    }

  .gb-agsdi-icon-settings {
    .gb-agsdi-icon-color-picker {
      margin-bottom : 20px;
      }

    .components-input-control {
      margin-bottom : 8px;
      }

    .components-range-control__track {
      color : #2F0082;
      }
    }

  .components-range-control__wrapper span > span {
    background-color : #2F0082;
    }

  .gb-agsdi-icon-settings .components-input-control__backdrop,
  .mce-agsdi-icon-picker.gb-agsdi-icon-picker .components-input-control__backdrop {
    box-shadow    : none !important;
    border        : 1px solid #E7EAEC !important;
    font-weight   : 400;
    border-radius : 4px;
    font-family   : "Open Sans", sans-serif;
    color         : #3D3B38;
    padding       : 0 16px !important;
    line-height   : 35px !important;
    width         : 100%;
    }

  .gb-agsdi-icon-settings input,
  .mce-agsdi-icon-picker.gb-agsdi-icon-picker select,
  .mce-agsdi-icon-picker.gb-agsdi-icon-picker input {
    background-color : #F3F6F8 !important;
    font-size        : 14px;
    height           : 35px;
    }

  .components-modal__header {
    background-color : #2F0082 !important;
    border           : none;
    padding          : 18px 23px !important;
    min-height       : auto !important;

    h1 {
      color         : #FFF !important;
      @include heading();
      @include responsiveFontSize(20px, 19px, 18px);
      margin-bottom : 0;
      padding-left  : 0 !important;
      }

    .components-button {
      opacity : 0.75;

      svg {
        fill : #FFF !important;
        }

      &:hover {
        opacity : 1;
        }

      }
    }

  /* Scrollbar */
  ::-webkit-scrollbar {
    /* total width */
    width            : 7px;
    background-color : #F8F9FD;
    border-radius    : $mainRadius;
    }

  ::-webkit-scrollbar-track {
    /* background of the scrollbar except button or resizer */
    background-color : #F8F9FD;
    }

  ::-webkit-scrollbar-track:hover {
    background-color : #DDE2E5;
    }

  ::-webkit-scrollbar-thumb {
    /* scrollbar itself */
    background-color : $headingColor;
    border-radius    : $mainRadius;
    border           : none;
    }

  ::-webkit-scrollbar-button {
    /* set button(top and bottom of the scrollbar) */
    display : none;
    }

  /* Color picker */

  // Other
  .mce-agsdi-icon-picker {

    .agsdi-icons [data-icon], .agsdi-icons [data-icon-pre] {
      font-size : 30px;
      width     : 48px;
      height    : 48px;
      padding   : 5px !important;

      &[class*="agsdix-fa"]:before {
        transform : translateY(0px);
        }
      }

    .agsdi-icons [data-icon*="agsdix-null"] {
      display : none;
      }

    svg .wadip-secondary-color {
      fill : #017CBA;
      }

    svg .wadip-tertiary-color {
      fill : #DDE4EB;
      }
    }

  }

// block
.block-editor-block-inspector .mce-agsdi-icon-picker {

  .agsdi-icons [data-icon], .agsdi-icons [data-icon-pre] {
    font-size : 30px;
    width     : 48px;
    height    : 48px;
    padding   : 5px !important;

    &[class*="agsdix-fa"]:before {
      transform : translateY(0px);
      }

    }

  .agsdi-icons [data-icon*="agsdix-null"] {
    display : none;
    }

  .gb-agsdi-icon-search {
    margin-bottom : 0px !important;
    }

  .components-base-control {
    margin-bottom : 10px;
    }

  .agsdi-icons {
    margin-bottom : 20px;
    border        : 1px solid #757575;
    }

  svg .wadip-secondary-color {
    fill : #017CBA;
    }

  svg .wadip-tertiary-color {
    fill : #DDE4EB;
    }
  }

// popup

.agsdi-pro-message,
.mce-agsdi-insert-dialog .mce-container .agsdi-pro-message,
.mce-agsdi-insert-dialog .mce-container .agsdi-pro-message * {
  text-align  : center !important;
  color       : #FFF;
  font-family : "Montserrat", sans-serif;
  font-size   : 16px;
  line-height : 1.2em;
  font-weight : 600;
  }

.agsdi-pro-message {
  padding : 47px 25px 268px;
  margin  : 20px auto;

  &:after {
    bottom : 45px;
    }
  }

.mce-agsdi-insert-dialog .mce-container .agsdi-pro-message {
  padding : 35px 25px 240px;
  margin  : 0 auto;

  &:after {
    bottom : 25px;
    }
  }

.agsdi-pro-message, .mce-agsdi-insert-dialog .mce-container .agsdi-pro-message {
  background-color    : #4F26BD;
  background-image    : url("../images/pro_banner_shadow.svg"); // fallback
  background-image    : url("../images/pro_banner_shadow.svg"), linear-gradient(211deg, #4F26BD 0%, #340090 100%); // W3C
  background-repeat   : no-repeat;
  background-position : top right;
  background-size     : cover;
  border-radius       : 5px;
  position            : relative;

  &:after {
    content    : "";
    background : url("../images/pro_banner_icons.svg") repeat-x  -7px 0;
    position   : absolute;
    left       : 0;
    width      : 100%;
    height     : 182px;
    }

  span:before {
    content       : url("../images/pro_banner_lock.svg");
    display       : block;
    margin-bottom : 16px;
    }

  a {
    text-transform  : uppercase;
    background      : #FF5D5B;
    border-radius   : 29px;
    text-decoration : none;
    color           : #FFF;
    display         : inline-block;
    padding         : 18px;
    margin-top      : 16px;
    line-height     : 1;
    max-width       : 180px;
    width           : 100%;
    font-size       : 12px;
    cursor          : pointer;

    &:hover {
      background-color : #CE5454;
      }

    &:hover, &:active, &:focus {
      box-shadow : none;
      outline    : none;
      }
    }
  }