/*#############################################################################
# MY LOAN APPLICATIONS
#############################################################################*/


// Products Box Base Styles
// To be extended
.my-loan-applications-base-box {
  background-color: #fff;
  padding: 20px 30px;
  @include border-radius(4px);
  @include box-shadow(-2px 2px 6px 0 rgba(black, 0.05));
}

.my-loan-application-list-wrapper {
  max-width: 1000px;
  margin: 0 auto;

  .loan-application-box {
    display: grid;
    grid-template-columns: repeat(4, 1fr) 200px;
    justify-items: center;
    margin: 0 0 20px;
    overflow: hidden;
    position: relative;
    border-radius: 4px;
    @extend .my-loan-applications-base-box;

    @include responsive-max($breakpoint-small) {
      grid-template-columns: none;
      grid-gap: 1rem;

      .box-title {
        margin: 0;
      }

      .loan-application-box-column {
        padding: 0;
        text-align: center;
      }

      .code {
        justify-self: center !important;
      }
    }

    &:last-child {
      margin: 0;
    }

    ::before {
      content: "";
      display: block;
      height: 100%;
      width: 7px;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
    }

    &.primary {
      ::before {
        background-color: $color-primary;
      }
    }

    &.secondary {
      ::before {
        background-color: $color-secondary;
      }
    }

    &.alert {
      ::before {
        background-color: $color-alert;
      }
    }

    &.success {
      ::before {
        background-color: $color-success;
      }
    }

    &.warning {
      ::before {
        background-color: $color-warning;
      }
    }

    // General Box Columns
    .loan-application-box-column {
      padding: 0 20px;

      &:first-child {
        padding-left: 0;
      }

      &:last-child {
        padding-right: 0;
      }
    }

    // Specific Box Columns
    .code {
      justify-self: start;
    }

    // Content Elements

    .box-title {
      color: $color-secondary;
      font-size: rem-calc(10px);
      text-transform: uppercase;
      margin: 0 0 10px;
    }

    .box-content {
      font-size: rem-calc(14px);
      margin: 0;
    }

    .box-content-big {
      font-size: rem-calc(20px);
      margin: 0;
    }

    // HOVER STATE

    &:hover {
      @include box-shadow(-6px 6px 10px 0 rgba(black, 0.075));
      cursor: pointer;
      &.primary {
        ::before {
          background-color: $color-primary-dark;
        }
      }

      &.secondary {
        ::before {
          background-color: $color-secondary-dark;
        }
      }

      &.alert {
        ::before {
          background-color: $color-alert-dark;
        }
      }

      &.success {
        ::before {
          background-color: $color-success-dark;
        }
      }

      &.warning {
        ::before {
          background-color: $color-warning-dark;
        }
      }
    }
  }
}