/**
 * @file
 * Style overrides for Geysir.
 */

// Colour variables used in this component.
$geysir-description-background: $color-paris !default;
$geysir-add-more-button: $color-hecuba !default;

.geysir-field-paragraph-wrapper {
  .geysir-field-paragraph-wrapper {
    /* Disable nested paragraphs. */
    outline: none !important;

    .geysir-field-paragraph-links,
    &::after {
      display: none !important;
    }
  }

  /* Fix overlay on margins */
  &:hover {
    outline: none;

    .geysir-field-paragraph-links {
      display: block;
    }
  }
}

.geysir-field-paragraph-links {
  &.geysir-field-paragraph-add-first {
   .add-before {
     display: flex;
     justify-content: center;
   }
  }
}

/* Fix modal styles. */
#media-library-wrapper,
#geysir-modal,
#geysir-modal-form {
  .horizontal-tabs {
    background: $white;
  }
  .button-override {
    @include make-btn;
    @include button-variant($background: $primary, $border: $primary);
    @include button-size($btn-padding-x, $btn-padding-y, $btn-font-size, $btn-line-height, $btn-border-radius);
    background-image: none;
  }
  .paragraph-type-top {
    .paragraph-type-title {
      font-size: 1.2rem;
      font-weight: bold;
    }
  }
  .form-control {
    width: auto; // Do not span form controls to 100% width.
  }
  .tabledrag-handle .handle {
    box-sizing: content-box;
  }
  .form-actions {
    margin-top: 1rem;
  }
  .button--primary:not(.no-bootstrap) {
    color: #fff;
    background: $primary;
    font-weight: bold;
  }
  .button {
    padding: $input-btn-padding-x $input-btn-padding-y;
    border-radius: $btn-border-radius;
  }
  .paragraph-form .form-actions {
    margin-bottom: 1rem;
  }
  .paragraphs-collapsed-description:after {
    background: none;
  }
  .tabledrag-handle .form-actions {
    margin-bottom: 15px;
  }
  .btn {
    min-width: 0;
  }
  .field-add-more-submit.btn-primary {
    background-color: transparent;
    border-color: transparent;
    color: $geysir-add-more-button;
  }
  .field-multiple-table {
    th h4 {
      color: white;
      margin-bottom: 0;
    }
    tr.draggable {
      td {
        padding: 1rem;
      }
      .image-widget {
        padding: 10px 0;
      }
    }
  }
  .text-format-wrapper {
    margin-bottom: 2rem;
    fieldset {
      margin-bottom: 0;
    }
  }
  .geysirmodaladd-select-type-form {
    display: flex;
    flex-wrap: wrap;
  }
  .field--name-field-d-background-color .js-form-type-color input,
  .js-form-type-d-color input.form-d-color {
    height: 35px;
    width: 65px;
    padding: 5px;
  }
  .field--widget-media-library-widget,
  .field--name-field-d-settings,
  .field--name-field-d-cta-link {
    .fieldset-wrapper,
    .details-wrapper {
      border: $card-border-width solid $card-border-color;
      padding: $card-spacer-y $card-spacer-x;
    }
    legend {
      font-size: 1em;
    }
    details summary {
      @include make-btn;
      @include button-variant($background: $dark, $border: $dark);
      @include button-size($btn-padding-x-sm, $btn-padding-y, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
      display: inline-block;
      text-align: center;
      margin-bottom: 10px;
    }
    fieldset.form-item-field-d-settings-0-value-custom-class {
      margin-top: 1rem;
    }
  }
  .dropbutton button {
    width: 100%;
  }
  .media-library-item {
    fieldset.form-group {
      padding: 5px;
    }
  }
}

.node--type-blog-post {
  #geysir-modal,
  #geysir-modal-form {
    .field--name-field-d-image img,
    .field--name-field-d-long-text {
      width: auto;
    }
  }
}

.editor-link-dialog .ui-dialog-content {
  overflow: unset;
}

/* Geysir UI dialog */
.ui-dialog {
  /* Form elements */
  .js-form-type-checkbox {
    padding-left: 0;
    .form-check-label {
      display: flex;
      align-items: center;
      margin: 0;
    }
    .form-check-input {
      position: static;
      margin: 0 5px 0 0;
    }
  }
  .form-autocomplete {
    background-position-x: 95%;
  }

  .description {
    opacity: 0.8;
  }

  // Button.
  .button {
    &:not(.media-library-item__remove) {
      border: none;
      background: transparent;
    }
  }

  // Submit button.
  .ui-dialog-buttonpane {
    .button {
      &--primary {
        @include make-btn;
        @include button-variant($background: $primary, $border: $primary);
        @include button-size($btn-padding-x-sm, $btn-padding-y, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
      }
    }
  }

  %geysir-throbber {
    vertical-align: middle;
    background-size: contain;
  }

  // Paragraphs Dropbutton
  .paragraphs-dropbutton-wrapper {
    // Throbber.
    .ajax-progress-throbber {
      .throbber {
        @extend %geysir-throbber;
      }
    }

    // Action.
    .button {
      &.form-submit {
        @include make-btn;
        @include button-variant($background: $primary, $border: $primary);
        @include button-size($btn-padding-x-sm, $btn-padding-y, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
      }
    }
  }

  // Dropbutton widget.
  .dropbutton-widget {
    border: none;
    border-radius: 0;

    .dropbutton {
      border-right: 0;

      // Throbber.
      .ajax-progress-throbber {
        display: block;
        background-color: $primary;
        color: $white;
        margin: 0;
        .throbber {
          @extend %geysir-throbber;
        }
      }

      // Actions.
      .dropbutton-action {
        .button {
          &.form-submit {
            @include make-btn;
            @include button-variant($background: $primary, $border: $primary);
            @include button-size($btn-padding-x-sm, $btn-padding-y, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
            margin: 0;
            width: 100%;
          }
        }
      }

      // Toggle.
      .dropbutton-toggle {
        button {
          @include make-btn;
          @include button-variant($background: $primary, $border: $primary);
          @include button-size($btn-padding-x-sm, $btn-padding-y, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
          margin: 0;
          background-image: none;

          .dropbutton-arrow {
            &:hover {
              background-color: transparent;
            }
          }
        }
      }
    }
  }
}

/* Geysir add type form */
.geysir-modal-add-select-type-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 1rem 0;
  .form-control {
    margin-bottom: 10px;
  }
  .geysir-add-type {
    position: relative;
    margin: 0 15px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    .ajax-progress-throbber {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba($white, 0.8);
    }
  }
}

.media-library-add-form {
  $mainContainer: &; // save parent selector as variable

  &--oembed {
    display: flex;

    #{$mainContainer}__input-wrapper {
      fieldset {
        margin-right: 10px;
      }

      .btn {
        align-self: center;
        margin-top: 0.5rem;
      }
    }
  }
}
