subscription-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-bottom: 40px;
}

.subscription-single,
.subscription-block {
  border: 1px solid #2e3133;
  border-radius: 12px;

  &[open] {
    border-color: rgba(255, 145, 86, 0.2);

    .subscription-single__button p,
    .subscription-block__button p {
      color: rgba(var(--color-button), var(--alpha-button-background));
      &::before {
        border-color: #ff9156;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 0C8.02219 0 6.08879 0.58649 4.4443 1.6853C2.79981 2.78412 1.51809 4.3459 0.761209 6.17316C0.00433284 8.00042 -0.1937 10.0111 0.192152 11.9509C0.578004 13.8907 1.53041 15.6725 2.92894 17.0711C4.32746 18.4696 6.10929 19.422 8.0491 19.8078C9.98891 20.1937 11.9996 19.9957 13.8268 19.2388C15.6541 18.4819 17.2159 17.2002 18.3147 15.5557C19.4135 13.9112 20 11.9778 20 10C19.9972 7.34869 18.9427 4.80678 17.068 2.93202C15.1932 1.05727 12.6513 0.00279983 10 0ZM14.3904 8.23654L9.00577 13.6212C8.93433 13.6927 8.84949 13.7494 8.75611 13.7881C8.66273 13.8268 8.56263 13.8468 8.46154 13.8468C8.36045 13.8468 8.26035 13.8268 8.16697 13.7881C8.07359 13.7494 7.98875 13.6927 7.91731 13.6212L5.60962 11.3135C5.46528 11.1691 5.38419 10.9734 5.38419 10.7692C5.38419 10.5651 5.46528 10.3693 5.60962 10.225C5.75396 10.0807 5.94972 9.99957 6.15385 9.99957C6.35798 9.99957 6.55374 10.0807 6.69808 10.225L8.46154 11.9894L13.3019 7.14808C13.3734 7.07661 13.4582 7.01991 13.5516 6.98123C13.645 6.94256 13.7451 6.92265 13.8462 6.92265C13.9472 6.92265 14.0473 6.94256 14.1407 6.98123C14.2341 7.01991 14.3189 7.07661 14.3904 7.14808C14.4619 7.21954 14.5185 7.30439 14.5572 7.39777C14.5959 7.49115 14.6158 7.59123 14.6158 7.69231C14.6158 7.79338 14.5959 7.89346 14.5572 7.98684C14.5185 8.08022 14.4619 8.16507 14.3904 8.23654Z' fill='%23FF9156'/%3E%3C/svg%3E");
      }
    }

    .subscription-single__variants,
    .subscription-block__option {
      height: auto;
    }
  }

  &:not([open]) {
    .subscription-single__button,
    .subscription-block__button {
      &:hover {
        background-color: #2e3133;
        border-color: #2e3133;
      }
    }
  }
}

.subscription-single__button,
.subscription-block__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  margin: 0;
  transition: 0.2s ease-in-out;
  cursor: pointer;
  border-radius: 12px;

  p {
    position: relative;
    margin: 0;
    padding-left: 32px;
    color: rgb(var(--color-foreground));
    transition: 0.2s ease-in-out;

    &::before {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      top: 50%;
      width: 20px;
      height: 20px;
      flex-shrink: 0;
      border: 1px solid #8a9299;
      border-radius: 50%;
      transform: translateY(-50%);
      background-position: center;
      background-repeat: no-repeat;
    }
  }

  span {
    padding: 6px;
    color: #1a1a1a;
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.24px;
    text-transform: uppercase;
    background-color: #8a9299;
    border-radius: 4px;
  }
}

.subscription-single__variants,
.subscription-block__option {
  height: 0;
  overflow: hidden;
  transition: 0.2s ease-in-out;
}

.subscription-single__variants--inner,
.subscription-block__option--inner {
  display: flex;
  gap: 4px;
  padding: 12px;
  border-top: 1px solid #2e3133;
}

.subscription-block__option--inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 12px;
}

.subscription-block__label {
  display: flex;
  align-items: center;
  gap: 8px;

  > * {
    margin: 0;
  }
}

.subscription-block__plans,
.subscription-block__variants {
  display: grid;
  grid-template-columns: repeat(var(--grid-size), minmax(0, 1fr));
  gap: 4px;
}

.option-button {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  border-radius: 6px;
  padding: 8px;
  border: 1px solid #2e3133;
  background-color: transparent;
  cursor: pointer;

  &.active {
    border: 1px solid rgba(255, 145, 86, 0.2);

    .option-button-value,
    .option-button-price {
      color: #ff9156;
    }
  }

  &:not(.active):hover {
    background-color: #282c2f;
  }

  svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }
}

.option-button-value {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  color: #8a9299;

  .option-button-price {
    color: #8a9299;
  }
}

.subscription__add-to-cart-container {
  margin-top: 12px;

  .button {
    width: 100%;

    span {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }
  }
}

@media screen and (max-width: 480px) {
  .option-button {
    flex-direction: column;
  }
}

@media screen and (min-width: 750px) {
  subscription-block {
    margin-bottom: 60px;
  }

  .subscription-single__button,
  .subscription-block__button {
    padding: 16px 20px;

    p {
      padding-left: 44px;

      &::before {
        width: 24px;
        height: 24px;
        background-size: cover;
        background-origin: border-box;
      }
    }
  }

  .subscription-single__variants--inner,
  .subscription-block__option--inner {
    padding: 20px;
  }

  .subscription-block__option--inner {
    gap: 16px;
  }

  .subscription-block__plans,
  .subscription-block__variants {
    gap: 8px;
  }

  .option-button {
    padding: 12px;
  }

  .subscription__add-to-cart-container {
    margin-top: 20px;

    .usp-list {
      padding-top: 22px;
    }
  }
}