@keyframes fadeInBottom {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

// Option for 6 column layout
.show-6 {
  .views-row {
    @include mq(tiny) {
      float: left;
      width: 50%;
    }

    @include mq(small) {
      width: 25%;
    }

    @include mq(large) {
      width: 20%;
    }

    @include mq(wide) {
      width: 16.666666667%;
    }
  }
}

.block-system > .views-form,
.view-content .views-form {
  .claro-details {
    box-shadow: none;
  }

  form {
    display: flex;
    flex-direction: column;
  }

  .views-table {
    order: -1;
    margin-top: 0;
  }

  [data-drupal-selector*=edit-header] {
    order: 99;
    position: relative;
    left: 0;
    padding: 0 var(--gin-spacing-m) var(--gin-spacing-m) var(--gin-spacing-m);
    border-radius: var(--gin-border-m);
    background: rgba(var(--gin-color-sticky-rgb), .95);

    @supports (backdrop-filter: blur()) {
      opacity: .999; /* Fix Chrome issue with mask */
      background: rgba(var(--gin-color-sticky-rgb), .9);
      backdrop-filter: blur(12px);

      .gin--dark-mode & {
        background: rgba($colorDarkAppBackground, .8);
      }
    }

    [data-drupal-selector*='edit-views-bulk-operations-bulk-form'] {
      > * {
        margin-right: var(--gin-spacing-xs);
      }

      .form-type--select,
      .form-actions {
        flex: 0 0 100%;
        max-width: 100%;
      }

      .form-actions {
        justify-content: flex-end;
      }

      .form-type--checkbox {
        align-self: center;
      }
    }

    .form-item__label:not([for='edit-select-all']) {
      display: block;
      float: left;
      top: 2px;
      margin-top: var(--gin-spacing-xxs);
      margin-right: var(--gin-spacing-m);
      line-height: 1.75;
    }

    &.is-sticky {
      z-index: 4;
      opacity: 1;
      position: sticky;
      left: 0;
      bottom: var(--gin-spacing-xs);
      box-shadow: 0 2px 6px 2px rgba(0, 0, 0, .03);
      animation: fadeInBottom 320ms 1 forwards;
    }
  }
}

.views-exposed-form.views-exposed-form {
  padding-top: var(--gin-spacing-xs);

  .form-element--type-select {
    max-width: 240px;
  }

  .form-type--boolean .form-boolean {
    margin-left: 0;
    margin-right: var(--gin-spacing-xs);
  }

  .fieldset--group {
    margin-top: var(--gin-spacing-s);
  }

  // Exposed filter with fieldgroup
  fieldset {
    margin-right: var(--gin-spacing-s);
    margin-bottom: .4rem;

    > .fieldset__legend > .fieldset__label {
      font-size: var(--gin-font-size-s);
      padding: 0 var(--gin-spacing-xs);
      margin-bottom: var(--gin-spacing-xxs);
    }

    .fieldset__wrapper {
      display: flex;
      margin: 0 0 0 var(--gin-spacing-xs);
    }

    .form-item {
      margin: 0 var(--gin-spacing-xs) var(--gin-spacing-xs) 0;
    }
  }
}

.views-exposed-form__item--preceding-actions.views-exposed-form__item--preceding-actions {
  margin-right: var(--gin-spacing-xs);
}

.gin-layer-wrapper {
  padding: var(--gin-spacing-l);

  @include mq($to: large) {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  & + .gin-layer-wrapper {
    margin-top: var(--gin-spacing-l);
  }

  & + h2,
  & + h3 {
    margin-top: var(--gin-spacing-xl);
  }
}

.views-edit-view {
  .unit-title {
    margin-top: 0;
    margin-bottom: var(--gin-spacing-m);
    @extend h2;
  }
}

// Preview form
.view-preview-form {
  &__title {
    padding: 0;
    background-color: transparent;
    border-bottom: 0 none;
  }

  .preview-section {
    padding: var(--gin-spacing-m);
    border: 1px dashed var(--gin-border-color-layer2)
  }

  .view-filters .preview-section {
    display: flex;
    flex-wrap: wrap;
  }

  .form-actions {
    align-items: flex-end;
  }

  .form-item--live-preview {
    position: static !important;
    margin-top: var(--gin-spacing-l);
  }

  .arguments-preview {
    margin-left: 0;
  }
}

.views-live-preview {
  padding: 0;

  .gin-layer-wrapper {
    border-color: var(--gin-border-color);
  }
}

.views-displays {
  border: 1px solid var(--gin-border-color);
  border-radius: var(--gin-border-l);
}

.views-admin {
  .icon.add {
    background: none;

    &:before {
      content: "+";
      font-size: var(--gin-font-size);
      line-height: .1;
    }
  }
}

.views-display-top {
  padding: var(--gin-spacing-m);
  background-color: var(--gin-bg-header);
  border: 0 none;
  border-radius: var(--gin-border-l);

  // #3186729: Drupal 9.1 fix
  &__extra-actions-wrapper {
    margin-bottom: 0;
  }

  .dropbutton-wrapper {
    top: 20px;
    right: 2var(--gin-spacing-l);
  }
}

#edit-displays {
  .views-display-top {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}

.edit-display-settings {
  padding: var(--gin-spacing-l);
  margin: 0;
}

.views-tabs {
  a {
    padding: var(--gin-spacing-xs) var(--gin-spacing-m);
  }

  .add a,
  li a {
    font-size: var(--gin-font-size-xs);
    font-weight: var(--gin-font-weight-heavy);
    color: var(--gin-color-primary);
    padding: var(--gin-spacing-xs) var(--gin-spacing-m);
    background: transparent;
    border: 2px solid var(--gin-color-primary);
    border-radius: var(--gin-border-xs);

    &::before {
      display: none;
    }

    .icon.add {
      display: block;
    }
  }

  .add a:hover,
  .add a:focus,
  li a:hover,
  li a:focus,
  li.is-active a,
  li.is-active a.is-active {
    color: var(--gin-bg-app);
    background: var(--gin-color-primary);
    border-color: transparent;
  }

  .add a:focus,
  li a:focus {
    outline: none;
    box-shadow: 0 0 0 1px var(--gin-color-focus-border), 0 0 0 4px var(--gin-color-focus);
  }

  .add {
    &.open {
      a {
        background: var(--gin-bg-layer2);

        &:hover, &:focus, &:active {
          color: var(--gin-color-primary);
        }
      }
    }
  }

  .action-list {
    top: 36px;
    background: var(--gin-bg-layer3);
    box-shadow: 0 1px 2px var(--gin-shadow-button);

    li {
      background-color: transparent;
      border: none;

      input.button {
        width: 100%;
        text-align: left;
        line-height: 1.2;
        box-shadow: none;
        border: none !important;
      }

      &:hover, &:focus, &:active {
        &,
        input.button {
          color: var(--gin-color-button-text);
          background: var(--gin-color-primary);
        }
      }
    }
  }
}

.views-ui-display-tab-bucket {
  // #3186729: Drupal 9.1 fix
  &__header {
    padding: 0;
  }

  & &__title {
    font-size: var(--gin-font-size-xl);
    font-weight: var(--gin-font-weight-semibold);
    color: var(--gin-color-title);
    text-transform: none;
    padding: var(--gin-spacing-m);
  }

  // #3186729: Drupal 9.1 fix
  &__header {
    padding: var(--gin-spacing-m) 0 var(--gin-spacing-xs);

    .views-ui-display-tab-bucket__title {
      padding: 0 var(--gin-spacing-m);
    }

    .views-ui-display-tab-bucket__actions {
      margin-right: var(--gin-spacing-m);
    }
  }

  .views-display-setting,
  .views-ui-display-tab-bucket > .views-display-setting {
    padding: var(--gin-spacing-xs) var(--gin-spacing-m);
  }

  .views-display-setting {
    color: var(--gin-color-text);
  }

  .views-display-setting:nth-of-type(even) {
    background-color: transparent;
  }

  .dropbutton-wrapper {
    top: 14px;
    right: var(--gin-spacing-m);
  }

  &.pager {
    margin: 0;
  }
}

.views-ui-display-tab-bucket.views-ui-display-tab-bucket {
  padding-top: 0;
  margin-bottom: 0;
  border-bottom-color: var(--gin-border-color);
}

.views-ui-display-tab-actions {
  .views-ui-display-tab-setting {
    padding: var(--gin-spacing-m);
  }
}

.views-query-info table tr {
  background-color: var(--gin-bg-layer2);

  td {
    color: var(--gin-color-text);
  }
}

.system-modules,
.locale-translation-status-form {
  tr.even,
  tr.odd {
    background: none;
    border-top: 1px solid var(--gin-border-color);
    border-bottom: none;
  }
}

.system-modules td {
  padding: var(--gin-spacing-m);
  height: auto;

  details summary {
    background-color: transparent;
  }
}

.views-display-column,
.edit-display-settings-top.views-ui-display-tab-bucket {
  margin-bottom: var(--gin-spacing-m);
  border-color: var(--gin-border-color);
  border-radius: var(--gin-border-m);
  box-shadow: none;
}

.views-ui-dialog {
  .form--inline {
    padding-top: 0;
  }

  .views-override:not(:empty) {
    background-color: var(--gin-bg-app);
    border-bottom: 0 none;
  }

  .form-item--fields-area-text-custom-removed {
    display: inline-block;
    margin-right: var(--gin-spacing-xxs);
  }
}

a.views-field-excluded {
  color: var(--gin-color-disabled);
}

.views-filterable-options {
  border-top: none;
}

.view-block-content .views-table {
  margin-top: 0;
}

.views-display-columns {
  .details-wrapper {
    margin: 0;
  }
}

.machine-name-label {
  color: var(--gin-color-text);
}

.machine-name-value {
  color: var(--gin-color-title);
}

.views-exposed-form .form-datetime-wrapper {
  margin-bottom: 0;
  margin-right: var(--gin-spacing-xs);
}