/**
 * Provides styling for Gin admin theme.
 */

body:has(.ui-dialog) {
  overflow: clip;
}

body.gin-login .user-form-page__user-form img {
  max-height: none;
}

iframe.media-oembed-content,
video {
  height: auto;
  width: 100%;
}

.details-wrapper {
  overflow: scroll;
}

.field-group-tabs-wrapper {
  ul.vertical-tabs__menu {
    width: 12rem;
  }
  .vertical-tabs__items.vertical-tabs__panes {
    margin-left: 12rem;
  }
  .vertical-tabs__items.vertical-tabs__panes {
    .vertical-tabs__item {
      min-height: 200px;
    }
  }
}

.form-item__label.option {
  width: 100%;
  .layout-select__item-title {
    text-transform: capitalize;
  }
}

.heading-widget--container .form-item {
  flex-grow: 0;
}

.js-lpb-component .lpb-btn--add,
.js-lpb-region .lpb-btn--add {
  z-index: 90;
}

@media (prefers-color-scheme: dark) {
  .lp-builder a.lpb-btn {
    color: rgb(27, 27, 29);
  }
}

.lpb-btn--add.before {
  top: 10px;
}

.lpb-btn--add.after {
  bottom: 10px;
}

.media-library-views-form__rows {
  min-width: 100%;
}

.media-library-selection .media-library-item--grid {
  min-width: 25%;
}

.media-library-edit__link.use-ajax {
  color: transparent;
}

.ui-dialog
  .ui-widget-content.ui-dialog-content
  input.lpb-component-list-search-input {
  margin-bottom: 1rem;
}

.ui-dialog-buttonset .paragraph-type-add-modal-button {
  display: none !important;
}

.toolbar-icon-deployments:before {
  --deployments-toolbar-icon: url("/modules/custom/activated_ux/images/deployments-toolbar-icon.svg");
  -webkit-mask-image: var(--deployments-toolbar-icon) !important;
  mask-image: var(--deployments-toolbar-icon) !important;
}

.ck {
  &.ck-balloon-panel {
    z-index: 1300 !important;
  }
  figure.drupal-media {
    &:not(.drupal-media-style-align-center) {
      margin: 1rem;
    }
    &:not(.drupal-media-style-align-center) {
      width: -moz-fit-content;
      width: fit-content;
    }
  }
}

.select2-results,
.select2-results__options[role="listbox"] {
  max-height: 35vh !important;
}

.draggableviews-weight {
  width: auto !important;
}

/**
 * Provides styling for the toolbar.
 */

.toolbar-tray {
  min-width: 250px;
}

.toolbar-icon-deployments:before {
  --deployments-toolbar-icon: url('/modules/custom/activated_ux/images/deployments-toolbar-icon.svg');
  -webkit-mask-image: var(--deployments-toolbar-icon) !important;
  mask-image: var(--deployments-toolbar-icon) !important;
}

/**
 * Provides styling for Layout Paragraphs.
 */

.lpb-dialog {
  min-width: 400px !important;
  .lpb-component-list img {
    min-width: 24px !important;
  }
  .lpb-component-list-search-input {
    width: 100%;
  }
}

.lpb-controls {
  min-width: -moz-max-content;
  min-width: max-content;
}

.layout-paragraphs-component-form .details-wrapper .entities-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  & .item-container {
    border-style: none;
  }
}

.paragraphs-features__add-in-between__row {
  display: grid;
  & .paragraphs-features__add-in-between__wrapper {
    width: 100% !important;
  }
}

/**
 * Provides styling for Entity Browser.
 */

.entity-browser-form {
  & .form-actions:has(.is-entity-browser-submit) {
    position: sticky;
  }
  & .form-actions:has(.is-entity-browser-submit) {
    bottom: 0px;
  }
  & .form-actions:has(.is-entity-browser-submit) {
    z-index: 10;
  }
  & .form-actions:has(.is-entity-browser-submit) {
    display: inline-block;
  }
  & .form-actions:has(.is-entity-browser-submit) {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  }
  & .form-actions:has(.is-entity-browser-submit) {
    --tw-bg-opacity: 0.5;
  }
  & .form-actions:has(.is-entity-browser-submit) {
    text-align: center;
  }
  & .form-actions:has(.is-entity-browser-submit) {
    width: 100%;
  }
  & .form-actions:has(.is-entity-browser-submit) {
    & .is-entity-browser-submit.button {
      margin-right: 1rem;
    }
  }
}

.entities-list:not(.entities-list--single-item) {
  grid-template-columns: unset !important;
}

/**
 * Provides styling for the Card component.
 */

.paragraph--type--card.paragraph--view-mode--preview {
  .field--name-field-card-media {
    float: left;
  }
  .field--name-field-card-media {
    margin-right: 1rem;
  }
}

.paragraph--type--card.paragraph--view-mode--default,
.paragraph--type--card.paragraph--view-mode--preview {
  & p,h3 {
    margin-top: 0px !important;
  }
  & p,h3 {
    margin-bottom: 0px !important;
  }
}

/**
 * Provides styling for the Carousel component.
 */

.paragraph--type--carousel {
  &.paragraph--view-mode--default,
  &.paragraph--view-mode--layout-2-column,
  &.paragraph--view-mode--layout-3-column,
  &.paragraph--view-mode--layout-4-column {
    .slick {
      margin-left: -1rem;
    }
    .slick {
      .slick__slider {
        display: grid;
      }
      .slick__slide {
        padding-left: 1rem;
      }
      .slick__slide {
        .field--name-image img {
          margin: auto;
        }
      }
    }
  }
  .slick__arrow {
    margin: 1rem;
  }
}

/**
 * Provides styling for the Grid component.
 */

.paragraph--type--grid {
  .field--name-field-grid-items {
    display: grid;
  }
  .field--name-field-grid-items {
    justify-content: center;
  }
  .field--name-field-grid-items {
    gap: 1rem;
  }
  .field--name-field-grid-items {
    margin-top: 1rem;
  }
  @media (min-width: 640px) {
    .field--name-field-grid-items {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }
  @media (min-width: 768px) {
    .field--name-field-grid-items {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  &.paragraph--view-mode--layout-2-column {
    @media (min-width: 1024px) {
      .field--name-field-grid-items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
  }
  &.paragraph--view-mode--layout-3-column {
    @media (min-width: 1024px) {
      .field--name-field-grid-items {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }
  }
  &.paragraph--view-mode--layout-4-column {
    @media (min-width: 1024px) {
      .field--name-field-grid-items {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }
  }
}

/**
 * Provides styling for the Hero component.
 */

.paragraph--type--hero {
  &.paragraph--view-mode--default {
    .field--name-field-subtitle {
      margin-top: 1rem;
      margin-bottom: 1rem;
    }
  }
  &.paragraph--view-mode--preview {
    position: relative;
  }
}

/**
 * Provides styling for the Horizontal Rule component.
 */

.paragraph--type--horizontal-rule.paragraph--view-mode--default {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/**
 * Provides styling for the Media component.
 */

.paragraph--type--media {
  &.paragraph--view-mode--default {
    .field--name-field-caption p {
      margin-top: 0px;
    }
  }
  &.paragraph--view-mode--preview {
    .field--name-field-media {
      float: left;
    }
    .field--name-field-media {
      margin-right: 1rem;
    }
  }
}

/**
 * Provides styling for the Rich Text Area component.
 */

.paragraph--type--rich-text-area {
  .field--name-field-rich-text-area {
    & p:first-of-type {
      margin-top: 0px !important;
    }
    & p:last-of-type {
      margin-bottom: 0px !important;
    }
    & .align-left,
    & .align-right,
    & .align-center {
      max-width: 50%;
    }
    & .align-left {
      margin: 0px;
    }
    & .align-left {
      margin-right: 1.5rem;
    }
    & .align-right {
      margin: 0px;
    }
    & .align-right {
      margin-left: 1.5rem;
    }
  }
}

.field--name-field-rich-text-area {
  -webkit-hyphens: none;
          hyphens: none;
  overflow-wrap: break-word;
}

/**
 * Provides styling for the Section component.
 */

.paragraph--type--section {
  padding: 0px;
}

/**
 * Provides styling for the View component.
 */

.paragraph--type--view {
  & .view-articles.view-display-id-recent  {
    .slick {
      margin-left: -1rem;
    }
    .slick {
      .slick__slider {
        display: grid;
      }
      .slick__slide {
        padding-left: 1rem;
      }
    }
  }
  .slick__arrow {
    margin: 1rem;
  }
}