MetaPhase-Consulting/State-TalentMAP

// Set focus color for most elements to color-black
// Then, call out any specific containers with a darker background color,
// and set its child elements to use a white focus color.

*,
input,
a {
  &:focus {
    outline: $tm-focus-outline-default;
    outline-offset: $tm-focus-outline-offset-default;
  }
}

// scss-lint:disable SelectorFormat
// The react-picky module uses two underscores in its class names.
// Instead of modifying the source css, the SelectorFormat rule
// has been disabled for this file in order to override styles on the
// default classes.
*:focus,
.usa-focus,
.picky__dropdown > div > .option:focus,
.picky__dropdown li:focus {
  outline: $tm-focus-outline-default !important;
  outline-offset: $tm-focus-outline-offset-default !important;
}

.Select.is-focused,
.tm-feedback,
.tm-footer-nav,
.bid-list-container,
.tm-glossary,
.condensed-card-top,
.position-details-header-container,
.results-search-bar,
.header-nav-link-container.is-highlighted,
.padded-main-content--header {
  *:focus {
    outline-color: $tm-focus-outline-color-alt !important;
  }
}

.dropdown__trigger,
.tooltip-link,
.static-content-toggle {
  &:focus {
    outline-color: $tm-focus-outline-color-alt !important;
  }
}

.portfolio-account-dropdown {
  .label-input-wrapper > input,
  .usa-button {
    &:focus {
      outline-color: $tm-focus-outline-color-alt !important;
    }
  }
}

// need a color that is accessible when the Compare drawer is either open or closed
.tm-scroll-up-container,
.account-dropdown-link {
  &:focus {
    outline-color: $blue-primary !important;
  }
}