@import '../../styles/variables';
@import '../../styles/react-toastify/scss/main';

pa-notifications {
  .Toastify__toast-container {
    .Toastify__toast {
      padding: $spacing $spacing $spacing $spacing;
      border-radius: 2px;
      box-shadow: 0 2px 3px 0 hsla(0, 0%, 0%, 0.2), 0 0 16px 0 hsla(0, 0%, 0%, 0.1);

      &-body {
        color: $black;
        font-size: 12px;
        line-height: $spacing * 4;
        margin: $spacing 0 0 $spacing * 2;
      }

      &-title {
        margin: 0 0 $spacing;
        color: $black;
        font-weight: bold;
      }

      &-close {
        width: 16px;
        height: 16px;
        margin: 0;
        padding: 0;
        border: none;
        background: none;
        cursor: pointer;

        &:focus {
          outline: none;
        }
      }
    }
  }
}