/* no max-width here: the Stylable sheet's 350px sat on the same element as
   Toast's own max-width, tied it and lost, so it never applied */
.navigation-toast {
  min-width: 200px;
  width: fit-content;
  margin: auto;

  & &__action-container {
    width: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
  }

  @media (hover: hover) {
    & &__action-container:hover button {
      text-decoration: underline;
    }
  }

  /* the root is doubled so this wins over TextButton's own light-skin colour,
     the way the Stylable `:skin(light):size(medium)` selector did */
  &#{&} &__action-button {
    color: var(
      --wds-toast-action-color,
      var(--wds-color-fill-light-primary, var(--wsr-color-D80, #ffffff))
    );
  }
}