appwrite/public/styles/comps/alerts.less

.alerts {
  ul {
    width: 100%;
    visibility: hidden;
    position: fixed;
    padding: 0;
    .func-end(0);
    .func-start(0);
    color: var(--config-color-normal);
    z-index: 1001;
    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;
        }

        a {
          border-bottom: dotted 1px var(--config-color-normal);
        }

        i {
          cursor: pointer;
          position: absolute;
          font-size: 14px;
          line-height: 20px;
          top: 9px;
          .func-start(9px);
          color: var(--config-color-background-dark);
          background: var(--config-color-normal);
          width: 22px;
          height: 22px;
          border-radius: 50%;
        }

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

          a {
            color: #ffffff!important;
            border-bottom: dotted 1px #ffffff!important;
          }

          i {
            color: var(--config-color-danger);
            background: #ffffff;
          }
        }

        &.success {
          color: #ffffff!important;
          background: var(--config-color-success)!important;
          
          a {
            color: #ffffff;
            border-bottom: dotted 1px #ffffff;
          }

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

        &.warning {
          color: var(--config-color-normal)!important;
          background: var(--config-color-warning)!important;

          a {
            color: var(--config-color-normal)!important;
            border-bottom: dotted 1px var(--config-color-normal)!important;
          }

          i {
            color: #ffffff;
            background: var(--config-color-normal)!important;
          }
        }

        &.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)!important;
    }

    i {
      color: var(--config-color-focus-fade)!important;
      background: var(--config-color-focus)!important;
    }
  }

  @media @phones, @tablets {
    ul {
      top: auto;
      bottom: 0;
      max-width: 100%;
      .func-start(0);

      li {
        margin: 5px 0 0 0;

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

.show-nav {
  .alerts {
    ul {
      .func-start(220px);
    }

    @media @phones, @tablets {
      ul {
        .func-start(0);
      }
    }
  }
}