@import "../../helpers";
.sf-shipping {
  .title {
    --heading-padding: var(--spacer-xl) 0 var(--spacer-lg);
    --heading-title-font-weight: var(--font-weight--bold);
    --heading-title-font-size: var(--h3-font-size);
    &:not(:first-of-type) {
      --heading-padding: var(--spacer-base) 0;
    }
    @include for-desktop {
      --heading-title-font-weight: var(--font-weight--semibold);
      --heading-padding: var(--spacer-xl) 0;
    }
  }
  .form {
    &__element {
      margin: 0 0 var(--spacer-base) 0;
      &:last-of-type {
        margin: 0;
      }
    }
    &__group {
      display: flex;
      align-items: center;
    }
    &__select {
      display: flex;
      align-items: center;
      --select-option-font-size: var(--font-size--base);
      --select-dropdown-color: blue;
      ::v-deep .sf-select__dropdown {
        margin: 0 0 2px 0;
        font-size: var(--font-size--base);
        font-family: var(--font-family--secondary);
        color: var(--c-link);
      }
    }
    &__radio {
      margin: var(--spacer-xs) 0;
      &:last-of-type {
        margin: var(--spacer-xs) 0 var(--spacer-xl);
      }
      ::v-deep .sf-radio__container {
        --radio-container-padding: var(--spacer-xs);
        @include for-desktop {
          --radio-container-padding: var(--spacer-xs) var(--spacer-xs)
            var(--spacer-xs) var(--spacer-sm);
        }
      }
    }
    @include for-desktop {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      &:last-of-type {
        margin: 0 calc(var(--spacer-2xl) - var(--spacer-sm)) 0 0;
      }
      &__element {
        margin: 0 0 var(--spacer-sm) 0;
        flex: 0 0 100%;
        &--half {
          flex: 1 1 50%;
          &-even {
            padding: 0 0 0 var(--spacer-base);
          }
        }
      }
      &__radio-group {
        flex: 0 0 calc(100% + var(--spacer-sm));
        margin: 0 calc(-1 * var(--spacer-sm));
      }
    }
  }
  .shipping {
    --radio-container-padding: var(--spacer-sm);
    &__label {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      &-price {
        font-size: var(--font-size--lg);
        text-transform: uppercase;
      }
    }
    &__description {
      --radio-description-margin: 0;
    }
    &__delivery {
      color: var(--c-text-muted);
      font-weight: var(--font-weight--normal);
      display: flex;
      width: 10.625rem;
      @include for-desktop {
        font-weight: var(--font-weight--light);
      }
    }
    &__action {
      margin: 0 0 0 var(--spacer-xs);
      &::before {
        content: "+";
      }
      &--is-active {
        --button-color: var(--c-primary);
        --button-transition: color 150ms linear;
        &::before {
          content: "-";
        }
      }
    }
    @include for-desktop {
      &__label {
        justify-content: space-between;
      }
      &__delivery {
        width: 100%;
      }
    }
  }
}