@import '@bolt/core-v3.x';

.c-acd-horizontal-divider {
  display: flex;
  width: 100%;
  text-align: center;
}

.c-acd-horizontal-divider__border {
  flex-grow: 1;
  margin-top: 6px;
  margin-bottom: 6px;
  border-top-style: solid;
  border-top-width: 1px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-color: var(--m-bolt-border);
}

.c-acd-horizontal-divider__text {
  padding-right: var(--bolt-spacing-x-xsmall);
  padding-left: var(--bolt-spacing-x-xsmall);
  font-size: var(--bolt-type-font-size-small);
  font-weight: var(--bolt-type-font-weight-bold);
  line-height: var(--bolt-type-line-height-small);
}

// WIP Rating Component
.c-acd-rating {
  display: flex;
}

.c-acd-rating__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%; // fix for Firefox and Safari wrapping behavior
}

.c-acd-rating__helper-text {
  display: inline-flex;
  font-size: var(--bolt-type-font-size-xsmall);
  font-weight: var(--bolt-type-font-weight-semibold);
  color: var(--bolt-color-gray);
  line-height: var(--bolt-type-line-height-xsmall);

  & + * {
    margin-left: var(--bolt-spacing-x-xsmall);
  }

  * + & {
    margin-left: var(--bolt-spacing-x-xsmall);
  }
}

.c-acd-rating__input {
  opacity: 0;
  position: absolute;
  left: -100%;
  pointer-events: none;
}

.c-acd-rating__inputs {
  display: inline-flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-right: calc(var(--bolt-spacing-x-xxsmall) * -1);
  margin-bottom: calc(var(--bolt-spacing-y-xxsmall) * -1);
  letter-spacing: -0.5rem;
}

.c-acd-rating__label {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 31px;
  height: 31px;
  margin-right: var(--bolt-spacing-x-xxsmall);
  margin-bottom: var(--bolt-spacing-y-xxsmall);
  font-size: var(--bolt-type-font-size-small);
  font-weight: var(--bolt-type-font-weight-bold);
  color: var(--bolt-color-navy);
  line-height: var(--bolt-type-line-height-small);
  text-align: center;
  letter-spacing: normal;
  cursor: pointer;
  user-select: none;
  border-radius: bolt-border-radius(full);
  background-color: var(--bolt-color-gray-light);
  transition: all 0.01s linear;

  &:before,
  &:after {
    content: '';
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translate3d(0, 0, 0);
    pointer-events: none;
    border-radius: bolt-border-radius(full);
    transition: all 0.05s linear;
  }

  &:before {
    border: 2px solid var(--bolt-color-info);
  }

  &:after {
    background-color: var(--bolt-color-black);
  }

  &:hover:after {
    opacity: 0.05;
  }

  &:active:after {
    opacity: 0.1;
  }
}

.c-acd-rating__input:focus + .c-acd-rating__label:before {
  opacity: 1;
}

.c-acd-rating__input:checked + .c-acd-rating__label {
  color: var(--bolt-color-white);
  background-color: var(--bolt-color-gray);

  &--0\/10 {
    background-color: #d61219;
  }

  &--1\/10 {
    background-color: #ce3900;
  }

  &--2\/10 {
    background-color: #c35000;
  }

  &--3\/10 {
    background-color: #b66200;
  }

  &--4\/10 {
    background-color: #a77100;
  }

  &--5\/10 {
    background-color: #977e00;
  }

  &--6\/10 {
    background-color: #868900;
  }

  &--7\/10 {
    background-color: #749300;
  }

  &--8\/10 {
    background-color: #609b12;
  }

  &--9\/10 {
    background-color: #47a334;
  }

  &--10\/10 {
    background-color: #20aa50;
  }
}

.c-acd-rating__no-rating-outline {
  display: block;
  opacity: 0;
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  outline: 2px dotted var(--bolt-color-gray);
  outline-offset: 2px;
}

.c-acd-rating__input--no-rating:focus ~ .c-acd-rating__no-rating-outline {
  opacity: 1;
}

.c-acd-badge {
  position: relative;

  &__lock {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.c-acd-horizontal-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;

  @media (min-width: 600px) {
    grid-template-columns: 50% 1fr;
  }

  .c-acd-horizontal-card-grid-item {
    padding-bottom: var(--bolt-spacing-y-small);
    border-width: 0;
    border-style: solid;
    border-color: var(--m-bolt-border);

    + .c-acd-horizontal-card-grid-item {
      padding-top: var(--bolt-spacing-y-small);
      padding-bottom: 0;
      border-top-width: 2px;
    }

    @include bolt-mq($from: small) {
      padding-right: var(--bolt-spacing-x-small);
      padding-bottom: 0;

      + .c-acd-horizontal-card-grid-item {
        padding-top: 0;
        padding-right: 0;
        padding-left: var(--bolt-spacing-x-small);
        border-top-width: 0;
        border-left-width: 2px;
      }
    }
  }
}

.c-acd-h5p-embed {
  @include bolt-shadow('level-20', false, var(--m-bolt-neutral));
  display: block;
  padding: var(--bolt-spacing-y-medium) var(--bolt-spacing-x-medium);
  color: var(--m-bolt-text);
  border-radius: bolt-border-radius(large);
  background-color: var(--m-bolt-bg);
}
