// Alerts
.alert {
  padding: @space-md @space-xl;
  margin: @space auto;
  font-weight: 300;
  font-size: @font-size-bump;
  h4 {
    margin-top: 0;
    color: inherit;
  }

  > *:first-child { margin-top: 0;                        }
  > *:last-child  { margin-bottom: 0;                     }

  .alert-link    { font-weight: @alert-link-font-weight; }

  > p, > ul      { margin-bottom: 0;                     }

  > p + p        { margin-top: 5px;                      }

  a { color: white; text-decoration: underline; }
  a:hover { opacity: .8 }
  a:active, a:focus { opacity: 1 }
  svg { vertical-align: bottom; }
}

.alert-danger--outline {
  padding: .5em .6em .6em .3em;
  margin: 0 0 1em;
  border-top: 2px solid #ea4b40;
  box-shadow: 0 1px 5px 1px rgba(63, 63, 63, 0.13);
  font-size: .9em;
  font-weight: 500;
  &:before {
    content: "";
    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Cpath%20d%3D%22M505.403%20406.394L295.389%2058.102c-8.274-13.721-23.367-22.245-39.39-22.245s-31.116%208.524-39.391%2022.246L6.595%20406.394c-8.551%2014.182-8.804%2031.95-.661%2046.37%208.145%2014.42%2023.491%2023.378%2040.051%2023.378h420.028c16.56%200%2031.907-8.958%2040.052-23.379%208.143-14.421%207.89-32.189-.662-46.369zm-28.364%2029.978a12.684%2012.684%200%200%201-11.026%206.436H45.985a12.68%2012.68%200%200%201-11.025-6.435%2012.683%2012.683%200%200%201%20.181-12.765L245.156%2075.316A12.732%2012.732%200%200%201%20256%2069.192c4.41%200%208.565%202.347%2010.843%206.124l210.013%20348.292a12.677%2012.677%200%200%201%20.183%2012.764z%22%20fill%3D%22%23ea4b40%22/%3E%3Cpath%20d%3D%22M256.154%20173.005c-12.68%200-22.576%206.804-22.576%2018.866%200%2036.802%204.329%2089.686%204.329%20126.489.001%209.587%208.352%2013.607%2018.248%2013.607%207.422%200%2017.937-4.02%2017.937-13.607%200-36.802%204.329-89.686%204.329-126.489%200-12.061-10.205-18.866-22.267-18.866zM256.465%20353.306c-13.607%200-23.814%2010.824-23.814%2023.814%200%2012.68%2010.206%2023.814%2023.814%2023.814%2012.68%200%2023.505-11.134%2023.505-23.814%200-12.99-10.826-23.814-23.505-23.814z%22%20fill%3D%22%23ea4b40%22/%3E%3C/svg%3E);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 1.75em;
    float: left;
    width: 2em;
    height: 4em;
    margin-right: .75em;
  }
}


.alert.popup {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: @space 0;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.33);
  transition: @transition;
  z-index: @zindex-alerts;
  margin: 0;
  .container {
    position: relative;
    padding: 0 10rem 0 5rem;
    @media screen and (max-width: @screen-sm) { padding: 1rem 8rem 1rem 4rem; }
    @media screen and (max-width: @screen-xs) { padding: 3rem 1rem 0 4rem; }
    &:after {
      content: '';
      background-position: 50%;
      background-repeat: no-repeat;
      background-size: contain;
      display: block;
      color: white;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 1%;
      width: 2.25rem;
      @media screen and (max-width: @screen-xs) { top: 2.5rem; left:0.5rem; }
    }
  }
  .icon-close {
    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%20348.333%20348.334%22%3E%3Cpath%20d%3D%22M336.559%2068.611L231.016%20174.165l105.543%20105.549c15.699%2015.705%2015.699%2041.145%200%2056.85-7.844%207.844-18.128%2011.769-28.407%2011.769-10.296%200-20.581-3.919-28.419-11.769L174.167%20231.003%2068.609%20336.563c-7.843%207.844-18.128%2011.769-28.416%2011.769-10.285%200-20.563-3.919-28.413-11.769-15.699-15.698-15.699-41.139%200-56.85l105.54-105.549L11.774%2068.611c-15.699-15.699-15.699-41.145%200-56.844%2015.696-15.687%2041.127-15.687%2056.829%200l105.563%20105.554L279.721%2011.767c15.705-15.687%2041.139-15.687%2056.832%200%2015.705%2015.699%2015.705%2041.145.006%2056.844z%22%20fill%3D%22%23FFF%22/%3E%3C/svg%3E);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 1rem;
    cursor: pointer;
    opacity: .7;
    position: absolute;
    top: 0;
    right: 0;
    width: 9rem;
    bottom: 0;
    border-left: 1px solid rgba(255, 255, 255, .7);
    transition: @transition;
    @media screen and (max-width: @screen-sm) {
      width: 7rem;
    }
    @media screen and (max-width: @screen-xs) {
      width: 100%;
      height: 3rem;
      left: 0; right: 0;
      top: 0; bottom: auto;
      border-left: 0;
      border-bottom: 1px solid rgba(255, 255, 255, .7);
    }
    &:hover  { transition: @transition; background-color: rgba(0, 0, 0, 0.1); border-color: rgba(255, 255, 255, .5); }
    &:active { transition: @transition; background-color: rgba(0, 0, 0, 0.1); border-color: rgba(255, 255, 255, .7); opacity: 1;  }
  }
  &.ng-hide { bottom: -20%; transition: @transition; }
}

// Alternate styles
.alert, .alert-info {
  .alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text);
  .container:after {
    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20x%3D%2230%22%20y%3D%2230%22%20viewBox%3D%220%200%2065%2065%22%20width%3D%22512%22%20height%3D%22512%22%3E%3Cpath%20d%3D%22M32.5%200C14.58%200%200%2014.579%200%2032.5S14.58%2065%2032.5%2065%2065%2050.421%2065%2032.5%2050.42%200%2032.5%200zm0%2061C16.785%2061%204%2048.215%204%2032.5S16.785%204%2032.5%204%2061%2016.785%2061%2032.5%2048.215%2061%2032.5%2061z%22%20fill%3D%22%23FFF%22/%3E%3Ccircle%20cx%3D%2233.018%22%20cy%3D%2219.541%22%20r%3D%223.345%22%20fill%3D%22%23FFF%22/%3E%3Cpath%20d%3D%22M32.137%2028.342a2%202%200%200%200-2%202v17a2%202%200%200%200%204%200v-17a2%202%200%200%200-2-2z%22%20fill%3D%22%23FFF%22/%3E%3C/svg%3E);
  }
}

.alert-success {
  .alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text);
  .container:after {
    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20478.2%20478.2%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Cpath%20d%3D%22M457.575%20325.1c9.8-12.5%2014.5-25.9%2013.9-39.7-.6-15.2-7.4-27.1-13-34.4%206.5-16.2%209-41.7-12.7-61.5-15.9-14.5-42.9-21-80.3-19.2-26.3%201.2-48.3%206.1-49.2%206.3h-.1c-5%20.9-10.3%202-15.7%203.2-.4-6.4.7-22.3%2012.5-58.1%2014-42.6%2013.2-75.2-2.6-97-16.6-22.9-43.1-24.7-50.9-24.7-7.5%200-14.4%203.1-19.3%208.8-11.1%2012.9-9.8%2036.7-8.4%2047.7-13.2%2035.4-50.2%20122.2-81.5%20146.3-.6.4-1.1.9-1.6%201.4-9.2%209.7-15.4%2020.2-19.6%2029.4-5.9-3.2-12.6-5-19.8-5h-61c-23%200-41.6%2018.7-41.6%2041.6v162.5c0%2023%2018.7%2041.6%2041.6%2041.6h61c8.9%200%2017.2-2.8%2024-7.6l23.5%202.8c3.6.5%2067.6%208.6%20133.3%207.3%2011.9.9%2023.1%201.4%2033.5%201.4%2017.9%200%2033.5-1.4%2046.5-4.2%2030.6-6.5%2051.5-19.5%2062.1-38.6%208.1-14.6%208.1-29.1%206.8-38.3%2019.9-18%2023.4-37.9%2022.7-51.9-.4-8.1-2.2-15-4.1-20.1zm-409.3%20122.2c-8.1%200-14.6-6.6-14.6-14.6V270.1c0-8.1%206.6-14.6%2014.6-14.6h61c8.1%200%2014.6%206.6%2014.6%2014.6v162.5c0%208.1-6.6%2014.6-14.6%2014.6h-61v.1zm383.7-133.9c-4.2%204.4-5%2011.1-1.8%2016.3%200%20.1%204.1%207.1%204.6%2016.7.7%2013.1-5.6%2024.7-18.8%2034.6-4.7%203.6-6.6%209.8-4.6%2015.4%200%20.1%204.3%2013.3-2.7%2025.8-6.7%2012-21.6%2020.6-44.2%2025.4-18.1%203.9-42.7%204.6-72.9%202.2h-1.4c-64.3%201.4-129.3-7-130-7.1h-.1l-10.1-1.2c.6-2.8.9-5.8.9-8.8V270.1c0-4.3-.7-8.5-1.9-12.4%201.8-6.7%206.8-21.6%2018.6-34.3%2044.9-35.6%2088.8-155.7%2090.7-160.9.8-2.1%201-4.4.6-6.7-1.7-11.2-1.1-24.9%201.3-29%205.3.1%2019.6%201.6%2028.2%2013.5%2010.2%2014.1%209.8%2039.3-1.2%2072.7-16.8%2050.9-18.2%2077.7-4.9%2089.5%206.6%205.9%2015.4%206.2%2021.8%203.9%206.1-1.4%2011.9-2.6%2017.4-3.5.4-.1.9-.2%201.3-.3%2030.7-6.7%2085.7-10.8%20104.8%206.6%2016.2%2014.8%204.7%2034.4%203.4%2036.5-3.7%205.6-2.6%2012.9%202.4%2017.4.1.1%2010.6%2010%2011.1%2023.3.4%208.9-3.8%2018-12.5%2027z%22%20fill%3D%22%23FFF%22/%3E%3C/svg%3E);
  }
}

.alert-warning {
  .alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text);
  .container:after {
    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Cpath%20d%3D%22M505.403%20406.394L295.389%2058.102c-8.274-13.721-23.367-22.245-39.39-22.245s-31.116%208.524-39.391%2022.246L6.595%20406.394c-8.551%2014.182-8.804%2031.95-.661%2046.37%208.145%2014.42%2023.491%2023.378%2040.051%2023.378h420.028c16.56%200%2031.907-8.958%2040.052-23.379%208.143-14.421%207.89-32.189-.662-46.369zm-28.364%2029.978a12.684%2012.684%200%200%201-11.026%206.436H45.985a12.68%2012.68%200%200%201-11.025-6.435%2012.683%2012.683%200%200%201%20.181-12.765L245.156%2075.316A12.732%2012.732%200%200%201%20256%2069.192c4.41%200%208.565%202.347%2010.843%206.124l210.013%20348.292a12.677%2012.677%200%200%201%20.183%2012.764z%22%20fill%3D%22%23FFF%22/%3E%3Cpath%20d%3D%22M256.154%20173.005c-12.68%200-22.576%206.804-22.576%2018.866%200%2036.802%204.329%2089.686%204.329%20126.489.001%209.587%208.352%2013.607%2018.248%2013.607%207.422%200%2017.937-4.02%2017.937-13.607%200-36.802%204.329-89.686%204.329-126.489%200-12.061-10.205-18.866-22.267-18.866zM256.465%20353.306c-13.607%200-23.814%2010.824-23.814%2023.814%200%2012.68%2010.206%2023.814%2023.814%2023.814%2012.68%200%2023.505-11.134%2023.505-23.814%200-12.99-10.826-23.814-23.505-23.814z%22%20fill%3D%22%23FFF%22/%3E%3C/svg%3E);
  }
}

.alert-danger  {
  .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
  .container:after {
    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Cpath%20d%3D%22M505.403%20406.394L295.389%2058.102c-8.274-13.721-23.367-22.245-39.39-22.245s-31.116%208.524-39.391%2022.246L6.595%20406.394c-8.551%2014.182-8.804%2031.95-.661%2046.37%208.145%2014.42%2023.491%2023.378%2040.051%2023.378h420.028c16.56%200%2031.907-8.958%2040.052-23.379%208.143-14.421%207.89-32.189-.662-46.369zm-28.364%2029.978a12.684%2012.684%200%200%201-11.026%206.436H45.985a12.68%2012.68%200%200%201-11.025-6.435%2012.683%2012.683%200%200%201%20.181-12.765L245.156%2075.316A12.732%2012.732%200%200%201%20256%2069.192c4.41%200%208.565%202.347%2010.843%206.124l210.013%20348.292a12.677%2012.677%200%200%201%20.183%2012.764z%22%20fill%3D%22%23FFF%22/%3E%3Cpath%20d%3D%22M256.154%20173.005c-12.68%200-22.576%206.804-22.576%2018.866%200%2036.802%204.329%2089.686%204.329%20126.489.001%209.587%208.352%2013.607%2018.248%2013.607%207.422%200%2017.937-4.02%2017.937-13.607%200-36.802%204.329-89.686%204.329-126.489%200-12.061-10.205-18.866-22.267-18.866zM256.465%20353.306c-13.607%200-23.814%2010.824-23.814%2023.814%200%2012.68%2010.206%2023.814%2023.814%2023.814%2012.68%200%2023.505-11.134%2023.505-23.814%200-12.99-10.826-23.814-23.505-23.814z%22%20fill%3D%22%23FFF%22/%3E%3C/svg%3E);
  }
}

