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

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

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

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

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

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

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

  .form-type--boolean .form-boolean {
    margin-inline-start: 0;
    margin-inline-end: var(--gin-spacing-xs);
  }

  // Single on/off checkbox (through Better Exposed Filters)
  .form-type--boolean.form-type--checkbox {
    margin-block-start: auto;
    margin-block-end: var(--gin-spacing-s);

    .form-item__label {
      margin-block-end: 0;
    }
  }

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

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

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

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

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

.views-exposed-form.views-exposed-form.views-exposed-form--preview {
  background: none;
  border-color: var(--gin-border-color);
  border-radius: var(--gin-border-l);
}

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

.views-exposed-form .form-item--no-label,
.views-exposed-form__item.views-exposed-form__item.views-exposed-form__item--actions {
  margin-block: var(--gin-spacing-s) 0;
  align-self: flex-end;
}

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

  @include mq(medium) {
    padding: var(--gin-spacing-l);
  }

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

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

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

// Preview form
.view-preview-form {
  &__title {
    padding: 0;
    background-color: transparent;
    border-block-end: 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-block-start: var(--gin-spacing-l);
  }

  .arguments-preview {
    margin-inline-start: 0;
  }
}

.views-live-preview {
  padding: 0;

  .section-title {
    color: var(--gin-color-text);
  }

  .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-block: var(--gin-spacing-m) var(--gin-spacing-xs);
  background-color: var(--gin-bg-header);
  border: 0 none;
  border-radius: var(--gin-border-l);

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

  .dropbutton-wrapper {
    inset-block-start: 20px;
    inset-inline-end: var(--gin-spacing-l);
  }
}

#edit-displays {
  .views-display-top {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }
}

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

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

    &.views-display-disabled-link {
      padding-inline-start: var(--gin-spacing-l);

      &::before {
        mask-image: icon('hide');
        mask-repeat: no-repeat;
        mask-position: center left;
        mask-size: contain;
        width: var(--gin-spacing-l);
        height: var(--gin-spacing-s);
        margin-inline-start: calc(var(--gin-spacing-m) * -1);
        background-color: currentColor;
        display: inline-block;
        content: '';
      }
    }
  }

  .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 !important;
    }

    .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);
        color: var(--gin-color-primary);

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

  .action-list {
    inset-block-start: 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: start;
        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;
  }

  .views-ui-display-tab-bucket__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-block: var(--gin-spacing-m) var(--gin-spacing-xs);
    padding-inline: 0;

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

    .views-ui-display-tab-bucket__actions {
      margin-inline-end: 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 {
    inset-block-start: 14px;
    inset-inline-end: var(--gin-spacing-m);
  }

  &.pager {
    margin: 0;
  }
}

.views-ui-display-tab-bucket.views-ui-display-tab-bucket {
  padding-block-start: 0;
  margin-block-end: 0;
  border-block-end-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-block-start: 1px solid var(--gin-border-color);
    border-block-end: 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-block-end: 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-block-start: 0;
  }

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

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

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

.views-filterable-options {
  border-block-start: none;
}

.view-block-content .views-table {
  margin-block-start: 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-block-end: 0;
  margin-inline-end: var(--gin-spacing-xs);
}

.view-header {
  margin-block-end: var(--gin-spacing-l);
}

// Disabled
.views-edit-view.disabled .views-displays,
.views-edit-view.disabled .views-display-column {
  background-color: transparent;
}

.views-edit-view.disabled .views-display-column {
  opacity: 0.75;
}