/* 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);
  border: 0;
  background: none;
  z-index: 4;
  border-radius: var(--border-radius-small);

  .icon-devtools {
    background-color: var(--button-background-color, rgba(21, 20, 26, 7%));
    background-image: url('chrome://global/skin/icons/developer.svg');
    background-size: var(--icon-size-medium);
    box-shadow: 0 0.8px 1.6px 0 rgba(58, 57, 68, 20%);
    padding: calc(5 * var(--space-xsmall));
  }

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

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

  &.expanded {
    background: $black-20;
  }
}

.discoverystream-admin {
  $border-color: var(--newtab-border-color);
  $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;
  }

  .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 $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-top: 1px solid $border-color;
    }

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

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

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

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

      &:first-child {
        border-inline-start: 1px solid $border-color;
      }

      &:last-child {
        border-inline-end: 1px solid $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);
      }
    }
  }
}
