mixin CardStorageSpaceStatus
  .card&attributes(attributes)
    +Background({image: `${CWD}assets/img/icons/spot-illustrations/corner-1.png`, className: 'bg-card'})
    .card-body.position-relative
      h5.text-warning Running out of your space?
      p.fs-10.mb-0 Your storage will be running out soon. Get more space and powerful productivity features.
      a(href="#!").btn.btn-link.fs-10.text-warning.mt-lg-3.ps-0
        | Upgrade storage
        span.fas.fa-chevron-right.ms-1(data-fa-transform="shrink-4 down-1")

mixin CardStorage
  .card&attributes(attributes)
    .card-body.d-flex.align-items-center
      .w-100
        h6.mb-3.text-800 Using Storage 
          strong.text-1100 1775.06 MB 
          | of 2 GB
        .progress-stacked.mb-3.rounded-3(style="height: 10px;")
          .progress(style="width: 43.72%;" role='progressbar' aria-valuenow='43.72' aria-valuemin='0' aria-valuemax='100')
            .progress-bar.bg-progress-gradient.border-end.border-100.border-2
          .progress(style="width: 18.76%;" role='progressbar' aria-valuenow='18.76' aria-valuemin='0' aria-valuemax='100')
            .progress-bar.bg-info.border-end.border-100.border-2
          .progress(style="width: 9.38%;" role='progressbar' aria-valuenow='9.38' aria-valuemin='0' aria-valuemax='100')
            .progress-bar.bg-success.border-end.border-100.border-2
          .progress(style="width: 28.14%;" role='progressbar' aria-valuenow='28.14' aria-valuemin='0' aria-valuemax='100')
            .progress-bar.bg-200

        .row.fs-10.fw-semi-bold.text-500.g-0
          .col-auto.d-flex.align-items-center.pe-3
            span.dot.bg-primary
            span Regular
            span.d-none.d-md-inline-block.d-lg-none.d-xxl-inline-block (895MB)
          .col-auto.d-flex.align-items-center.pe-3
            span.dot.bg-info
            span System
            span.d-none.d-md-inline-block.d-lg-none.d-xxl-inline-block (379MB)
          .col-auto.d-flex.align-items-center.pe-3
            span.dot.bg-success
            span Shared
            span.d-none.d-md-inline-block.d-lg-none.d-xxl-inline-block (192MB)
          .col-auto.d-flex.align-items-center
            span.dot.bg-200
            span Free
            span.d-none.d-md-inline-block.d-lg-none.d-xxl-inline-block (576MB)