<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />

<sky-element name="app-toast">
<template>
  <style>
    :host {
      position: absolute;
      bottom: 32px;
      right: 32px;
      max-width: 55%;
      box-shadow: 0px 0px 12px 2px rgba(22, 22, 22, 0.4);
      background-image: linear-gradient(#E5D658, #DFCF43);
      border: 1px solid #AEA477;
      padding: 6px;
      border-radius: 2px;
      display: flex;
      align-items: center;
      font-size: 0.8em;
      overflow: hidden;
    }

    .header {
      flex-shrink: 0;
      margin-right: 6px;
    }

    .close-box {
      position: absolute;
      top: 3px;
      right: 3px;
      width: 1em;
      overflow: hidden;
      text-align: center;
      outline: 1px solid #AEA477;
    }
  </style>
  <div class="header">
    <content select=".toast-icon" />
  </div>
  <div class="content">
    <content select=".toast-content" />
  </div>
  <div class="close-box">
   X
  </div>
</template>
<script>
module.exports = class extends SkyElement {
}.register();
</script>
</sky-element>