@randstad-design/orbit-multitheme/dist/assets/theme-randstad/components/toast.css

multitheme Front-end code based on Randstad Human Forward components

@-webkit-keyframes fade-in-toast {
  from {
    bottom: 0;
    opacity: 0;
    visibility: hidden; }
  to {
    bottom: 10px;
    opacity: 1;
    visibility: visible; } }

@keyframes fade-in-toast {
  from {
    bottom: 0;
    opacity: 0;
    visibility: hidden; }
  to {
    bottom: 10px;
    opacity: 1;
    visibility: visible; } }

@-webkit-keyframes fade-in-toast--l {
  from {
    bottom: 0;
    opacity: 0;
    visibility: hidden; }
  to {
    bottom: 30px;
    opacity: 1;
    visibility: visible; } }

@keyframes fade-in-toast--l {
  from {
    bottom: 0;
    opacity: 0;
    visibility: hidden; }
  to {
    bottom: 30px;
    opacity: 1;
    visibility: visible; } }

.toast {
  font-size: 16px;
  letter-spacing: 0;
  line-height: 25px;
  border-radius: 8px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  max-height: 0 !important;
  padding: 12px 20px 20px 20px;
  position: fixed;
  visibility: hidden; }
  .toast--active {
    height: auto;
    max-height: inherit !important;
    visibility: visible;
    z-index: 1; }
  .toast.closable--closed {
    -webkit-animation: fade-out 0.2s 9.8s;
    animation: fade-out 0.2s 9.8s;
    max-height: none !important;
    opacity: 0;
    -webkit-transition: visibility 0.2s ease, opacity 0.2s ease;
    transition: visibility 0.2s ease, opacity 0.2s ease;
    visibility: hidden; }
  .toast__message {
    font-size: 16px;
    letter-spacing: 0;
    line-height: 25px;
    margin-bottom: 0; }
  .toast__cta {
    margin: 20px 0 0 auto;
    padding-left: 10px;
    text-align: right; }
  .toast .icon svg {
    -webkit-transition: fill 0.2s;
    transition: fill 0.2s; }

@media (max-width: 940px) {
  .toast {
    bottom: 10px;
    left: 10px;
    right: 10px; }
    .toast__message {
      -webkit-box-flex: 1;
      -webkit-flex: 1 100%;
      -ms-flex: 1 100%;
      flex: 1 100%;
      margin-right: 35px;
      width: 100%; }
    .toast__cta {
      -webkit-box-flex: 1;
      -webkit-flex: 1 100%;
      -ms-flex: 1 100%;
      flex: 1 100%; }
    .toast .icon {
      right: 15px;
      top: 15px; }
    .toast--active {
      -webkit-animation: fade-in-toast 0.2s;
      animation: fade-in-toast 0.2s; } }

@media (min-width: 941px) {
  .toast {
    bottom: 30px;
    right: 30px;
    width: 450px; }
    .toast__message {
      margin-right: 45px;
      width: auto; }
    .toast .icon {
      top: 18px;
      right: 20px; }
    .toast--active {
      -webkit-animation: fade-in-toast--l 0.2s;
      animation: fade-in-toast--l 0.2s; } }

.bg-variant-brand-secondary.toast {
  background: var(--color-brand-secondary);
  border: 1px solid var(--color-white);
  color: var(--color-white); }
  .bg-variant-brand-secondary.toast .icon svg {
    fill: var(--color-white-alpha-50); }
    .bg-variant-brand-secondary.toast .icon svg:hover {
      fill: var(--color-white); }
  .bg-variant-brand-secondary.toast .button {
    border-color: var(--color-brand-tertiary);
    color: var(--color-white); }
    .bg-variant-brand-secondary.toast .button .icon svg {
      fill: var(--color-white); }
    .bg-variant-brand-secondary.toast .button:hover, .bg-variant-brand-secondary.toast .button:focus {
      background-color: var(--color-brand-tertiary);
      color: var(--color-brand-secondary); }
      .bg-variant-brand-secondary.toast .button:hover .icon svg, .bg-variant-brand-secondary.toast .button:focus .icon svg {
        fill: var(--color-brand-secondary); }
    .bg-variant-brand-secondary.toast .button:active {
      background-color: var(--color-brand-tertiary-shade-110);
      color: var(--color-brand-secondary);
      border-color: var(--color-brand-tertiary-shade-110); }
      .bg-variant-brand-secondary.toast .button:active .icon svg {
        fill: var(--color-brand-secondary); }
  .bg-variant-brand-secondary.toast .button--filled {
    background: var(--color-brand-tertiary);
    border-color: var(--color-brand-tertiary);
    color: var(--color-brand-secondary); }
    .bg-variant-brand-secondary.toast .button--filled .icon svg {
      fill: var(--color-brand-secondary); }
    .bg-variant-brand-secondary.toast .button--filled:hover, .bg-variant-brand-secondary.toast .button--filled:focus {
      background-color: var(--color-white);
      color: var(--color-brand-secondary);
      border-color: var(--color-white); }
      .bg-variant-brand-secondary.toast .button--filled:hover .icon svg, .bg-variant-brand-secondary.toast .button--filled:focus .icon svg {
        fill: var(--color-brand-secondary); }
    .bg-variant-brand-secondary.toast .button--filled:active {
      background-color: var(--color-brand-tertiary-shade-110);
      color: var(--color-brand-secondary);
      border-color: var(--color-brand-tertiary-shade-110); }
      .bg-variant-brand-secondary.toast .button--filled:active .icon svg {
        fill: var(--color-brand-secondary); }

/*# sourceMappingURL=toast.css.map */