@import 'scss/font-family.scss';
@import 'theme/variables.scss';

.main-container {
  background-color: #fff;
  border-radius: 3px;
  max-width: 320px;
  .payment-container {
    max-width: 320px;

    .component-holder {
      max-width: 308px;
      width: 100%;

      &.with-border-top{
        border-top: 1px solid #dadada;
      }
    }

    .extra-info-holder {
      max-width: 320px;
      width: 100%;
      .divider-custom {
        max-width: 296px;
        height: 8px;
        border-top: solid 2px $bw-9;
      }

      .component-holder {
        max-width: 308px;
        width: 100%;
      }
    }
    font-family: $font-family;
    .divider-custom {
      max-width: 296px;
      height: 8px;
      border-top: solid 2px $bw-9;
    }
    .mileage-pay {
      height: 34px;
      gap: 4px;
      padding: 0 6px;

      .text-value {
        width: auto;
        height: 26px;
        gap: 4px;

        .payment-count {
          gap: 4px;
          color: $ta-black;

          .text {
            height: 26px;
            width: auto;
          }

          .round {
            width: 18px;
            height: 18px;
            border-radius: 20px;
            background-color: $bw6-2;
            color: $white;
            font-size: 11px;
            line-height: 18px;
            text-align: center;
          }
        }

        .value {
          height: 26px;
          width: auto;

          .total-money-closed {
            height: 26px;
            width: auto;
          }
        }
      }
    }
    .salary-value {
      padding-right: 4px;
    }

    .salary-title {
      padding-left: 5px;
    }
    .salary,
    .earnings {
      background-color: $ta-light-grey-5;
      height: 30px;
      width: 100%;
      max-width: 308px;

      border-radius: 2px;

      .money {
        padding-right: 6px;
      }

      .earnings-tlitle {
        margin-left: 6px;
      }

      &.debth{

        .money{
          color: $ta-red-11;
        } 
        
        background-color: $white-8;
      }
    }

    .earnings {
      color: $ta-blue-13;
    }

    .paid-in-full {
      color: $ta-green-2;

      .ca-font-extra-bold{
        padding-left: 6px;
      }
    }

    .button-cnt {
      height: 40px;
      width: 100%;
      padding: 0px 4px;
      border-radius: 2px;
      padding: 5px 0px;
    }

    .process-btn:hover {
      .earnings {
        background-color: darken($ta-light-grey-5, 10%);
      }
    }

    .process-button {
      background-color: $ta-blue-13;
      border-radius: 2px;
      border: none;
      color: $bw2;
      transition: background-color 0.3s ease;
      height: 32px;

      &.incomplete-status {
        background-color: $bw2;
        color: $ta-blue-13;
      }
      &:not(.incomplete-status):hover {
        background-color: darken($ta-blue-13, 10%);
        cursor: pointer;
      }
    }
  }
}