/*---------------------------------
-----  dimension variables --------
----------------------------------*/
/*------  standard elements padding & margin  -------*/
/**
* mobile first breakpoints based on design specification 
* deprecated variables
*/
/**
* mobile first breakpoints based on design specification 
* $bp-m: >= 768px
* $bp-l: >= 1024px
* $bp-xl: >= 1440px
* @media only screen and (min-width: $bp-m) {}
*/
/**
**  Official Font sizes
------------------------------- */
/**
** Line-heights
------------------------------- */
/*
    Mixin to progressively-enhance :focus-visible, keeping :focus where not supported
    Add an arbitrary list of selectors into the arguments, and the styling in the block.
    I you pass no selectors to the mixin the parent ("ampersand") operator is used instead.

    There are two mixins: 
    - focus-visible: a generic focus-visible, giving you "slots" to decide what to render for :focus, :focus reset, and :focus-visible
    - focus-visible-outline: a focus-visible, which only resets the outline. If you don't need more custom resets, use this one!

    Use focus-visible:
    The key thing here is checking which slot is being rendered.
    For example, you can reset box-shadow here, or anything else.

    @include focus-visible using ($slot) {
        @if $slot == focus {
            outline: 2px solid transparent;
            box-shadow: 0 0 0 4px blue;
        }
        @if $slot == focusReset {
            box-shadow: none;
        }
        @if $slot == focusVisible {
            box-shadow: 0 0 0 4px blue;
        }
    }

    Use focus-visible-outline:
    @include focus-visible-outline("button", "a[href]") {
        outline: 2px solid blue;
    }

    Resulting CSS (compressed):

    button:focus,
    a[href]:focus {
        outline: 2px solid blue;
    }

    button:focus:not(:focus-visible),
    a[href]:focus:not(:focus-visible) {
        outline: none;
    }
    button:focus-visible,
    a[href]:focus-visible {
        outline: 2px solid blue;
    }
*/
/**
* mobile first breakpoints based on design specification 
* deprecated variables
*/
/**
* mobile first breakpoints based on design specification 
* $bp-m: >= 768px
* $bp-l: >= 1024px
* $bp-xl: >= 1440px
* @media only screen and (min-width: $bp-m) {}
*/
/*---------------------------------
-----  dimension variables --------
----------------------------------*/
/*------  standard elements padding & margin  -------*/
/**
* mobile first breakpoints based on design specification 
* deprecated variables
*/
/**
* mobile first breakpoints based on design specification 
* $bp-m: >= 768px
* $bp-l: >= 1024px
* $bp-xl: >= 1440px
* @media only screen and (min-width: $bp-m) {}
*/
/**
**  Official Font sizes
------------------------------- */
/**
** Line-heights
------------------------------- */
.ux-notification-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .ux-notification-item {
    display: block;
  }
}

.ux-notification-item__icon-wrapper {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
.ux-notification-item__icon-wrapper .ux-icon {
  font-size: 48px;
}

.ux-notification-item__source-date {
  display: flex;
  flex-direction: column;
  margin-left: 15px;
}
.ux-notification-item__source-date .ux-notification-item__date-time {
  font-size: var(--ux-notification-item-date-time-font-size);
}
.ux-notification-item__source-date .ux-notification-item__date {
  margin-left: 10px;
}

.ux-notification-item__text-wrapper {
  margin-left: 5px;
}
.ux-notification-item__text-wrapper .ux-notification-item__error {
  font-family: "Frutiger-Light", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-weight: 400;
  font-size: 13px;
  color: #ff0201;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.ux-notification-item__text-wrapper .ux-notification-item__source {
  font-size: var(--ux-notification-item-source-font-size);
}
.ux-notification-item__text-wrapper .ux-notification-item__headline {
  margin-bottom: 7px;
}
.ux-notification-item__text-wrapper .ux-notification-item__text {
  color: var(--ux-notification-item-text-color);
}
.ux-notification-item__text-wrapper .ux-notification-item__text .ux-text-link {
  white-space: nowrap;
}

.ux-notification-item__status-wrapper {
  right: 10px;
  top: 5px;
  position: absolute;
}

.ux-notification-item--overview {
  align-items: flex-start;
}

@media only screen and (min-width: 1024px) {
  .ux-notification-item--detail {
    align-items: center;
  }
}
.ux-notification-item--detail .ux-notification-item__icon-wrapper {
  /* stylelint-disable max-nesting-depth, selector-max-compound-selectors */
  /* stylelint-enable max-nesting-depth, selector-max-compound-selectors */
}
@media only screen and (min-width: 768px) {
  .ux-notification-item--detail .ux-notification-item__icon-wrapper {
    width: 85px;
  }
}
@media only screen and (min-width: 768px) {
  .ux-notification-item--detail .ux-notification-item__icon-wrapper .ux-icon {
    font-size: 63.84px;
  }
}

.ux-notification-item--information .ux-notification-item__headline {
  color: #131313;
}

.ux-notification-item--warning .ux-notification-item__headline {
  color: #ff9302;
}

.ux-notification-item--error .ux-notification-item__headline {
  color: #ff0201;
}