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

.ds-topics-widget {
  display: flex;
  position: relative;
  flex-direction: column;

  .ds-topics-widget-header {
    font-size: var(--font-size-large);
  }

  hr {
    // Bug 2001446: We are incorrectly using a border color token as the background color, but the
    // intent of this element is to appear a 1px solid border line.
    background-color: var(--border-color-deemphasized);
    height: 1px;
    border: 0;
    margin: var(--space-small) 0 0;
  }

  .ds-topics-widget-list-container {
    flex-grow: 1;

    ul {
      margin: var(--space-large) 0 0;
      padding: 0;
      display: flex;
      align-items: center;
      grid-gap: var(--space-small);
      flex-wrap: wrap;

      li {
        display: flex;

        a {
          font-size: var(--font-size-small);
          text-decoration: none;
          padding: var(--space-small) var(--space-medium);
          background: var(--newtab-background-color-secondary);
          border: 1px solid var(--border-color-deemphasized);
          color: var(--newtab-text-primary-color);
          border-radius: var(--border-radius-medium);

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

          &:focus {
            outline: 0;
            box-shadow: 0 0 0 3px var(--newtab-primary-action-background-dimmed), 0 0 0 1px var(--newtab-primary-action-background);
            transition: box-shadow 150ms;
          }
        }
      }

      .ds-topics-widget-list-overflow-item {
        display: flex;

        @media (min-width: $break-point-medium) {
          display: none;
        }

        @media (min-width: $break-point-widest) {
          display: flex;
        }
      }
    }
  }

  .ds-topics-widget-button {
    margin: var(--space-large) 0 0;
    font-size: inherit;
    text-align: center;
    padding: var(--space-small);
    border-radius: var(--border-radius-small);
    background-color: var(--newtab-primary-action-background-pocket);
    border: 0;

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

    &:focus {
      outline: 0;
      box-shadow: 0 0 0 3px var(--newtab-primary-action-background-pocket-dimmed), 0 0 0 1px var(--newtab-primary-action-background-pocket);
      transition: box-shadow 150ms;
    }
  }
}