appwrite/public/styles/comps/alerts.less

.alerts {
  ul {
    width: 100%;
    visibility: hidden;
    position: fixed;
    padding: 0;
    right: 0;
    left: 0;
    color: var(--config-color-normal);
    z-index: 1002;
    margin: 0 auto;
    bottom: 15px;
    max-width: 560px;

    li {
      margin: 10px 0 0 0;
      padding: 0;

      div.message {
        position: relative;
        padding: 12px 35px;
        margin: 0 auto;
        list-style: none;
        background: var(--config-color-background-dark);
        text-align: center;
        font-size: 14px;
        border-radius: 10px;
        line-height: 16px;
        min-height: 16px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
        opacity: .95;

        span, a {
          font-weight: 600;
        }

        i {
          cursor: pointer;
          position: absolute;
          font-size: 14px;
          line-height: 22px;
          top: 8px;
          .func-start(8px);
        }

        &.error {
          color: #ffffff;
          background: var(--config-color-danger);
        }

        &.success {
          color: #ffffff;
          background: var(--config-color-success);
        }

        &.warning {
          color: #ffffff;
          background: var(--config-color-success);
        }

        &.open {
          display: block;
        }

        &.close {
          display: none;
        }
      }
    }
  }

  .cookie-alert {
    background: var(--config-color-focus-fade)!important;
    color: var(--config-color-focus);

    a {
      color: var(--config-color-focus);
      font-weight: 400;
      border-bottom: dotted 1px var(--config-color-focus);
    }
  }

  @media @phones, @tablets {
    ul {
      top: auto;
      bottom: 0;
      max-width: 100%;

      li {
        margin: 5px 0 0 0;

        div.message {
          border-radius: 0;
        }
      }
    }
  }
}