@use "lib/viewport";

.admin-controls.admin-site-settings-filter-controls
  .controls
  .admin-site-settings-filter-controls__input {
  max-width: 300px;
}

.admin-controls.admin-site-settings-filter-controls .menu-toggle {
  margin-left: 0.5em;
}

.admin-plugin-config-area {
  &__settings {
    .admin-filtered-site-settings {
      padding: 0.5em 1em;
    }

    .setting-label {
      margin-left: 18px;
    }
  }
}

.admin-changes-banner {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: var(--space-3);
  padding: var(--space-3);
  background-color: var(--secondary);
  border: 1px solid var(--primary-300);
  border-radius: var(--d-border-radius);
  box-shadow: var(--shadow-card);
  z-index: 1;

  @include viewport.until(sm) {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .controls {
    display: flex;
    gap: var(--space-3);
  }

  em {
    font-style: normal;
    font-weight: 700;
  }
}

.admin-theme-site-settings-row {
  &__setting {
    .setting-label {
      margin: 0;
    }

    .setting-description {
      color: var(--primary-medium);
      font-size: var(--font-down-1);
    }
  }

  @include viewport.from(sm) {
    &__setting {
      width: 40%;
    }

    &__default {
      width: 10%;
    }

    &__overridden {
      width: 50%;
    }
  }
}
