@import '../base/common'
@import '../base/colors'

.ultimate-blocks-icon-control-panel-row
  margin-bottom: 24px

  .ultimate-blocks-icon-control-preview-main
    @extend %flex-center-all
    @extend %click-target
    @extend %border-radius
    @include size(50px, 50px)
    border: 1px solid $wp-gray
    padding: 3px 5px

.ultimate-blocks-icon-list-wrap
  @extend %flex-center-all
  flex-direction: column


  .ultimate-blocks-icon-card
    @extend %click-target
    @extend %flex-center-all
    @extend %default-transition
    @extend %border-radius
    @include size(30px, 30px)
    padding: 5px
    background-color: $white
    border: 1px solid $wp-gray

    &[data-is-empty=true]
      border-style: dashed

    &:hover
      transform: scale(1.3)

  .ultimate-blocks-frequent-icon-listing
    @extend %flex-center-all
    margin: 10px 0

    .ultimate-blocks-icon-card
      margin: 0 5px

      &[data-is-empty=true]
        cursor: default !important
        pointer-events: none

        &:hover
          transform: none !important


  .ultimate-blocks-icon-search-input
    @extend %reset-default-input
    @extend %default-transition
    background-color: $white
    border: 1px solid $wp-gray !important
    font-size: 13px !important

    &:active, &:hover, &:focus
      border: 1px solid $wp-black !important

  .ultimate-blocks-icon-listing
    @extend %border-radius
    @include size(100%, 150px)
    display: grid
    padding: 10px
    border: 1px solid $wp-gray
    grid-template-columns: repeat(4, 1fr)
    grid-template-rows: minmax(min-content, max-content)
    grid-auto-rows: minmax(min-content, max-content)
    grid-gap: 10px
    justify-items: center
    justify-content: center
    align-items: center
    overflow: auto
    background-color: rgb(239, 239, 239, 0.2)

    .no-icon-listing
      grid-column: span 4
      grid-row: 1
      color: $gray-500


.ultimate-blocks-icon-card-popover-wrap
  @extend %flex-center-all
  min-width: 50px
  background-color: $wp-black
  color: $white
  font-size: 80%