@import '@vtmn/css-design-tokens/src/base-colors';
@import '@vtmn/css-design-tokens/src/themes/default';
@import '@vtmn/css-design-tokens/src/typography';
@import '@vtmn/css-design-tokens/src/opacities';
@import '@vtmn/css-design-tokens/src/shadows';

/* Interactive Rating **/

.vtmn-rating {
  color: var(--vtmn-semantic-color_content-primary);
  font-family: var(--vtmn-typo_font-family);
  font-weight: var(--vtmn-typo_font-weight--normal);
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  inline-size: fit-content;
}

.vtmn-rating--interactive {
  position: relative;
  block-size: rem(32px);
  inline-size: calc(rem(40px) * 5);
  min-inline-size: calc(rem(40px) * 5);
  background-image: url("data:image/svg+xml;charset=utf-8, <svg width='32' height='32' viewBox='0 0 16 16' fill='%23007DBC' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M3.298 14.805 8 12.173l4.702 2.632-1.05-5.285 3.957-3.659-5.352-.634L8 .333 5.743 5.227.39 5.86l3.958 3.66-1.05 5.285zm7.533-2.575L8 10.645 5.169 12.23 5.8 9.048 3.42 6.845l3.222-.382L8 3.517l1.359 2.946 3.222.382-2.382 2.203.632 3.182z'/></svg>");
  background-size: rem(40px) rem(32px);
  outline: 0;
}

.vtmn-rating--interactive:focus-visible {
  box-shadow: var(--vtmn-shadow_focus-visible);
}

.vtmn-rating--interactive label {
  position: absolute;
  block-size: 100%;
  background-size: rem(40px) rem(32px);
  outline: none;
  cursor: pointer;
  transition: box-shadow 200ms ease-out;
}

.vtmn-rating--interactive label:nth-of-type(1) {
  z-index: 5;
  inline-size: rem(40px);
}

.vtmn-rating--interactive label:nth-of-type(2) {
  z-index: 4;
  inline-size: calc(rem(40px) * 2);
}

.vtmn-rating--interactive label:nth-of-type(3) {
  z-index: 3;
  inline-size: calc(rem(40px) * 3);
}

.vtmn-rating--interactive label:nth-of-type(4) {
  z-index: 2;
  inline-size: calc(rem(40px) * 4);
}

.vtmn-rating--interactive label:nth-of-type(5) {
  z-index: 1;
  inline-size: calc(rem(40px) * 5);
}

.vtmn-rating--interactive input:checked + label,
.vtmn-rating--interactive input:focus + label {
  background-image: url("data:image/svg+xml;charset=utf-8, <svg width='32' height='32' viewBox='0 0 16 16' fill='%23007DBC' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='m8 12.173-4.702 2.632 1.05-5.285L.391 5.861l5.352-.634L8 .333l2.257 4.894 5.352.634-3.957 3.659 1.05 5.285L8 12.173z'/></svg>");
}

.vtmn-rating--interactive input {
  outline: 0;
  border: 0;
  padding: 0;
  margin: 0;
  position: absolute;
  block-size: 0;
  inline-size: 0;
}

.vtmn-rating:not([aria-disabled='true']) input:focus-visible + label {
  outline: 0;
  box-shadow: var(--vtmn-shadow_focus-visible);
}

.vtmn-rating > *:not(input, label) {
  margin: 0 rem(3px);
}

.vtmn-rating[aria-disabled='true'] {
  opacity: var(--vtmn-opacity_disabled-state);
  cursor: not-allowed;
}

.vtmn-rating[aria-disabled='true'] .vtmn-rating--interactive > * {
  pointer-events: none;
}

.vtmn-rating_comment--primary {
  font-family: var(--vtmn-typo_font-family);
  font-size: var(--vtmn-typo_text-2-font-size);
  color: var(--vtmn-semantic-color_content-primary);
  font-weight: var(--vtmn-typo_font-weight--bold);
}

.vtmn-rating_comment--secondary {
  font-family: var(--vtmn-typo_font-family);
  font-size: var(--vtmn-typo_text-2-font-size);
  color: var(--vtmn-semantic-color_content-secondary);
  font-weight: var(--vtmn-typo_font-weight--normal);
}

.vtmn-rating span[class^='vtmx-'] {
  font-size: var(--vtmn-typo_text-2-font-size);
}

/* Variants */

.vtmn-rating_variant--default {
  color: var(--vtmn-semantic-color_content-primary);
}

.vtmn-rating_variant--brand {
  color: var(--vtmn-semantic-color_background-brand-primary);
}

/* SIZES */

/* Small */
.vtmn-rating_size--small {
  font-size: var(--vtmn-typo_text-3-font-size);
}

.vtmn-rating_size--small span {
  font-size: var(--vtmn-typo_text-3-font-size);
}

.vtmn-rating_size--small span[class^='vtmx-'] {
  font-size: var(--vtmn-typo_text-2-font-size);
}

.vtmn-rating_size--small > .vtmn-rating--interactive {
  block-size: rem(16px);
  inline-size: calc(rem(20px) * 5);
  min-inline-size: calc(rem(20px) * 5);
  background-image: url("data:image/svg+xml;charset=utf-8, <svg width='16' height='16' viewBox='0 0 16 16' fill='%23007DBC' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M3.298 14.805 8 12.173l4.702 2.632-1.05-5.285 3.957-3.659-5.352-.634L8 .333 5.743 5.227.39 5.86l3.958 3.66-1.05 5.285zm7.533-2.575L8 10.645 5.169 12.23 5.8 9.048 3.42 6.845l3.222-.382L8 3.517l1.359 2.946 3.222.382-2.382 2.203.632 3.182z'/></svg>");
  background-size: rem(20px) rem(16px);
}

.vtmn-rating_size--small > .vtmn-rating--interactive label {
  background-size: rem(20px) rem(16px);
}

.vtmn-rating_size--small > .vtmn-rating--interactive label:nth-of-type(1) {
  inline-size: rem(20px);
}

.vtmn-rating_size--small > .vtmn-rating--interactive label:nth-of-type(2) {
  inline-size: calc(rem(20px) * 2);
}

.vtmn-rating_size--small > .vtmn-rating--interactive label:nth-of-type(3) {
  inline-size: calc(rem(20px) * 3);
}

.vtmn-rating_size--small > .vtmn-rating--interactive label:nth-of-type(4) {
  inline-size: calc(rem(20px) * 4);
}

.vtmn-rating_size--small > .vtmn-rating--interactive label:nth-of-type(5) {
  inline-size: calc(rem(20px) * 5);
}

.vtmn-rating_size--small > .vtmn-rating--interactive input:checked + label,
.vtmn-rating_size--small > .vtmn-rating--interactive input:focus + label {
  background-image: url("data:image/svg+xml;charset=utf-8, <svg width='16' height='16' viewBox='0 0 16 16' fill='%23007DBC' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='m8 12.173-4.702 2.632 1.05-5.285L.391 5.861l5.352-.634L8 .333l2.257 4.894 5.352.634-3.957 3.659 1.05 5.285L8 12.173z'/></svg>");
}

/* Medium */
.vtmn-rating_size--medium {
  font-size: var(--vtmn-typo_text-1-font-size);
}

.vtmn-rating_size--medium span {
  font-size: var(--vtmn-typo_text-1-font-size);
}

.vtmn-rating_size--medium span[class^='vtmx-'] {
  font-size: rem(32px);
}

.vtmn-rating_size--medium > .vtmn-rating--interactive {
  block-size: rem(32px);
  inline-size: calc(rem(40px) * 5);
  min-inline-size: calc(rem(40px) * 5);
  background-image: url("data:image/svg+xml;charset=utf-8, <svg width='32' height='32' viewBox='0 0 16 16' fill='%23007DBC' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M3.298 14.805 8 12.173l4.702 2.632-1.05-5.285 3.957-3.659-5.352-.634L8 .333 5.743 5.227.39 5.86l3.958 3.66-1.05 5.285zm7.533-2.575L8 10.645 5.169 12.23 5.8 9.048 3.42 6.845l3.222-.382L8 3.517l1.359 2.946 3.222.382-2.382 2.203.632 3.182z'/></svg>");
  background-size: rem(40px) rem(32px);
}

.vtmn-rating_size--medium > .vtmn-rating--interactive label {
  background-size: rem(40px) rem(32px);
}

.vtmn-rating_size--medium > .vtmn-rating--interactive label:nth-of-type(1) {
  inline-size: rem(40px);
}

.vtmn-rating_size--medium > .vtmn-rating--interactive label:nth-of-type(2) {
  inline-size: calc(rem(40px) * 2);
}

.vtmn-rating_size--medium > .vtmn-rating--interactive label:nth-of-type(3) {
  inline-size: calc(rem(40px) * 3);
}

.vtmn-rating_size--medium > .vtmn-rating--interactive label:nth-of-type(4) {
  inline-size: calc(rem(40px) * 4);
}

.vtmn-rating_size--medium > .vtmn-rating--interactive label:nth-of-type(5) {
  inline-size: calc(rem(40px) * 5);
}

.vtmn-rating_size--medium > .vtmn-rating--interactive input:checked + label,
.vtmn-rating_size--medium > .vtmn-rating--interactive input:focus + label {
  background-image: url("data:image/svg+xml;charset=utf-8, <svg width='32' height='32' viewBox='0 0 16 16' fill='%23007DBC' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='m8 12.173-4.702 2.632 1.05-5.285L.391 5.861l5.352-.634L8 .333l2.257 4.894 5.352.634-3.957 3.659 1.05 5.285L8 12.173z'/></svg>");
}
