/**
 * @file
 * Visual styling for layout builder elements.
 */

.layout-builder,
.layout-builder-block {
  background: var(--theme-dark-body-background);
}

.layout-builder-browser-block-item img {
  max-width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.5rem;
}

.layout-builder-block__content-preview-placeholder-label {
  color: var(--color-black);
}

.layout-builder-update-block .horizontal-tab-button a {
  color: var(--color-black);
}

div.layout-builder-browser-block-item {
  display: inline-block;
  margin-left: 0.5rem !important;
}

div.layout-builder-browser-block-item a {
  padding: 0.5rem;
  background: #e5edff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  min-height: 120px;
  border-radius: var(--border-radius-base);
  color: var(--color-black);
}

div.layout-builder-browser-block-item a:hover {
  background-color: #ccdbff;
}

.js-media-library-item {
  position: relative;
}

#media-library-content {
  margin-left: 1em;
}

.ui-dialog button.ui-dialog-titlebar-close {
  background: url("data:image/svg+xml,%3csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11 1.318l-10 10M11 11.318l-10-10' stroke='%23D3D4D9' stroke-width='1.5'/%3e%3c/svg%3e") no-repeat 50%;
}

.ui-dialog .button.js-hide {
  display: none;
}