@use 'sass:map';
@use '../config';

@use '../config' as *;

.payment {
  display: inline-block;
  height: config.$avatar-size;
  aspect-ratio: 1.66666;
  font-style: normal;
  vertical-align: bottom;
  background: no-repeat center/100% 100%;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
  @include config.border-radius(var(--border-radius));
}

@each $payment in config.$payment-providers {
  .payment-provider-#{$payment} {
    background-image: url('#{config.$assets-base}/img/payments/#{$payment}.svg');
  }

  .payment-provider-#{$payment}-dark {
    background-image: url('#{config.$assets-base}/img/payments/#{$payment}-dark.svg');
  }
}

@each $payment-size, $size in config.$payment-sizes {
  .payment-#{$payment-size} {
    height: map.get($size, size);
  }
}