/* stylelint-disable max-nesting-depth */

.discoverystream-admin-toggle {
  position: fixed;
  // Adjust spacing for DevTools wrench icon to avoid overlapping the customize button
  inset-block-end: calc(var(--button-size-icon) + var(--space-xxlarge) + var(--space-small));
  inset-inline-end: var(--space-xlarge);
  appearance: none;
  border: 0;
  border-radius: var(--border-radius-small);
  background-color: var(--button-background-color, rgba(21, 20, 26, 7%));
  box-shadow: 0 0.8px 1.6px 0 rgba(58, 57, 68, 20%);
  padding: calc(5 * var(--space-xxsmall));
  z-index: 4;
  display: flex;
  align-items: center;

  .lightWallpaper &,
  .darkWallpaper & {
    background-color: var(--newtab-weather-background-color);

    @media (prefers-contrast) {
      background-color: var(--background-color-box);
    }
  }

  &:hover {
    background-color: var(--newtab-button-static-hover-background);
  }

  &:active {
    background-color: var(--newtab-button-static-active-background);
  }

  &:focus-visible {
    @include ds-focus;

    background-color: var(--newtab-button-static-active-background);
  }

  &:dir(rtl) {
    transform: scaleX(-1);
  }

  > div {
    width: var(--icon-size-medium);
    height: var(--icon-size-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    > img {
      -moz-context-properties: fill;
      display: inline-block;
      color: var(--icon-color);
      fill: currentColor;
      height: 100%;
      object-fit: contain;
      vertical-align: middle;
      width: 100%;
    }
  }
}

.discoverystream-admin {
  .personalization-data {
    padding-block-end: var(--space-xlarge);
  }
  $monospace: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', 'Droid Sans Mono',
    'Source Code Pro', monospace;

  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  background: var(--newtab-background-color);
  height: 100%;
  overflow-y: scroll;
  margin: 0 auto;
  color: var(--newtab-text-primary-color);
  z-index: 3;

  &.collapsed {
    display: none;
  }

  h1 {
    font-size: var(--font-size-xxlarge);
  }

  h2 .button,
  p .button {
    font-size: inherit;
    padding: var(--space-xsmall) var(--space-medium);
    margin-inline-start: var(--space-xsmall);
    margin-block-end: 0;
  }

  .toggle-wrapper {
    margin-block: var(--space-large);
    width: 200px;
  }

  .inferred-personalization-overrides {
    margin-block: var(--space-large);
  }

  .inferred-overrides-header {
    display: flex;
    align-items: center;
    gap: var(--space-medium);
  }

  .inferred-overrides-title {
    margin: 0;
  }

  .inferred-overrides-actions {
    display: flex;
    align-items: center;
    gap: var(--space-medium);

    .button {
      margin: 0;
    }
  }

  .inferred-overrides-toggle-row td:first-child {
    font-weight: var(--font-weight-bold);
  }

  .inferred-overrides-last-refreshed {
    display: flex;
    align-items: center;
    gap: var(--space-small);
    font-size: var(--font-size-small);
    margin-block: var(--space-small) var(--space-medium);
    padding-inline-start: var(--space-small);
  }

  .inferred-overrides-last-refreshed-label {
    font-weight: var(--font-weight-bold);
  }

  .inferred-vectors-row {
    display: flex;
    align-items: stretch;
    gap: var(--space-xlarge);
    margin-block-start: var(--space-xlarge);
  }

  .inferred-vector-column {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-small);
  }

  .inferred-vector-panel {
    border: 1px solid var(--border-color);
    padding: var(--space-small);
    flex: 1;
    display: flex;
    flex-direction: column;

    pre {
      margin-block-start: 0;
      flex: 1;
      overflow: auto;
    }
  }

  .inferred-vector-title {
    font-weight: var(--font-weight-bold);
  }

  .inferred-overrides-table-header td {
    font-weight: var(--font-weight-bold);
  }

  .inferred-score-col {
    width: 1%;
    white-space: nowrap;
    text-align: center;
    padding-inline: 0;
  }

  .inferred-overrides-toggle-row td {
    vertical-align: middle;
  }

  .inferred-override-controls {
    display: flex;
    align-items: center;
    gap: var(--space-medium);
  }

  .inferred-override-slider {
    width: 160px;
  }

  .inferred-override-value {
    min-width: 2ch;
    text-align: end;
  }

  .details-section {
    margin-block: var(--space-large);

    summary {
      font-size: var(--font-size-large);
    }
  }

  table {
    border-collapse: collapse;
    width: 100%;

    &.minimal-table {
      border-collapse: collapse;
      border: 1px solid var(--border-color);

      td {
        padding: var(--space-small);
      }

      td:first-child {
        width: 1%;
        white-space: nowrap;
      }

      td:not(:first-child) {
        font-family: $monospace;
      }
    }

    &.errorReporting {
      tr {
        border: 1px solid var(--newtab-background-color-secondary);
      }

      td {
        padding: var(--space-xsmall);

        &[rowspan] {
          border: 1px solid var(--newtab-background-color-secondary);
        }
      }
    }
  }

  .large-data-container {
    max-height: 500px;
    overflow-y: scroll;
  }

  .message-item {
    &:first-child td {
      border-block-start: 1px solid var(--border-color);
    }

    td {
      vertical-align: top;
      padding: var(--space-small);
      border-block-end: 1px solid var(--border-color);

      &.min {
        width: 1%;
        white-space: nowrap;
      }

      &.message-summary {
        width: 60%;
      }

      &.button-column {
        width: 15%;
      }

      &:first-child {
        border-inline-start: 1px solid var(--border-color);
      }

      &:last-child {
        border-inline-end: 1px solid var(--border-color);
      }
    }

    &.blocked {
      .message-id,
      .message-summary {
        opacity: 0.5;
      }

      .message-id {
        opacity: 0.5;
      }
    }

    .message-id {
      font-family: $monospace;
      font-size: var(--font-size-small);
    }
  }

  pre {
    background: var(--newtab-background-color-secondary);
    margin: 0;
    padding: var(--space-small);
    font-size: var(--font-size-small);
    max-width: 750px;
    overflow: auto;
    font-family: $monospace;
  }

  .helpLink {
    padding: var(--space-medium);
    display: flex;
    background: $black-10;
    border-radius: var(--border-radius-small);
    align-items: center;

    a {
      text-decoration: underline;
    }

    .icon {
      min-width: 18px;
      min-height: 18px;
    }
  }

  .ds-component {
    margin-block-end: var(--space-large);
  }

  .collapsed {
    display: none;
  }

  .icon {
    display: inline-table;
    width: 18px;
    height: 18px;
  }

  .button {
    &:disabled,
    &:disabled:active {
      opacity: 0.5;
      cursor: unset;
      box-shadow: none;
    }
  }

  .weather-section {
    margin-block-end: var(--space-xlarge);

    form {
      display: flex;

      label {
        margin-inline-end: var(--space-medium);
      }
    }
  }
}