@import "../../variables";

.ghostkit-component-modal {
  @media (min-width: 600px) {
    min-width: 600px;
    max-width: 600px;

    // fix for Ace editor tooltips
    margin-left: -300px;
    transform: none;

    // position
    &.ghostkit-component-modal-position-top {
      top: 112px;
    }
  }

  // size
  @media (min-width: 840px) {
    &.ghostkit-component-modal-size-lg {
      min-width: 800px;
      max-width: 800px;

      // fix for Ace editor tooltips
      margin-left: -400px;
      transform: none;
    }
  }

  // Fix for new WP 5.9 styles
  body > .components-modal__screen-overlay & {
    @media (min-width: 600px) {
      margin-left: auto;

      // position
      &.ghostkit-component-modal-position-top {
        top: 0;
        margin-top: 112px;
      }
    }

    // size
    @media (min-width: 840px) {
      &.ghostkit-component-modal-size-lg {
        margin-left: auto;
      }
    }
  }

  // header
  .components-modal__header {
    .components-modal__icon-container svg {
      display: block;
      margin-right: 10px;
    }

    .components-modal__header-heading {
      font-weight: 600;
    }
  }

  // tab panel
  .ghostkit-component-modal-tab-panel {
    .components-tab-panel__tabs {
      margin-top: -16px;
      margin-right: -16px;
      margin-left: -16px;

      .ghostkit-control-tabs-tab {
        padding: 12px 16px;
        color: inherit;

        &:focus {
          outline: none;
        }
      }
    }
  }
}