@randstad-design/orbit-multitheme/dist/assets/theme-spherion/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-family: Montserrat, arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  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-family: Montserrat, arial, sans-serif;
    font-size: 16px;
    text-transform: none;
    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; } }

.toast {
  background: #2e2e2e;
  border: 1px solid #fff;
  color: #fff; }
  .toast button:hover svg {
    fill: #c4c4c4; }

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