// use svg

export default styled.todo `
  .product-sku-onetwo-wrap {
    display: flex;
    padding: $spacing-big 0;
    border-bottom: $border-thin;

    @tablet-or-smaller() {
      border-bottom: $border-light;
      padding: rem(12) 0;
    }

    @phone-or-smaller() {
      margin-left: rem(-8);
      margin-right: rem(-8);
      padding-left: $spacing-small;
      padding-right: $spacing-small;
    }

    &:first-child,
    &:first-of-type {
      padding-top: $spacing;
    }
    &:last-of-type,
    &:last-child {
      padding-bottom: $spacing;
    }

    &.one-two {
      align-items: flex-start;
    }

    .swatch-svg {
      margin: 0;
    }
  }

  .product-options-item {
    /* currently styling color swatch */
    max-width: rem(60);
    margin-left: $spacing;
    display: inline-flex;
  }

  /* unused? only pdp? */
  .product-hero-container {
    .product-details-header {
      @font (24, regular);
      margin-bottom: $spacing-very-small;
    }

    .critical-details {
      .prices {
        flex-direction: row;
        margin-top: $spacing-small;
      }
      .price-container {
        &.sale-price {
          @font (24, bold);
        }

        &.original-price {
          @font (13, light);
        }
      }
    }
  }
`

const OptionListWrap = styled.div `
  display: flex;
  padding-top: $spacing;
  align-items: flex-start;
  display: flex;
  align-self: stretch;
  flex-wrap: wrap;
  max-width: 100%;
  width: 100%;
  .option-item {
    margin-right: $spacing-small;
    margin-bottom: $spacing-small;
  }
  .select-dropdown {
    width: 100%;
  }

  .select-dropdown {
    display: flex;
    flex-wrap: wrap;
    padding: $spacing 0;

    .dropdown-parent {
      /* @todo was space-between, but that needs margins */
      justify-content: space-around;
      padding: 0 $spacing;
      @phone-or-smaller() {
        padding: 0 $spacing-small;
      }
    }
  }
  img {
    display: inline-flex;
    margin: rem(0);
  }
  .arrow-wrapper {
    /* position: absolute; */
    /* right: rem(10); */
    padding: unset;
    display: inline-flex;
  }
`

const StyledLabelHeader = styled.label.attrs({
  className: 'product-options-label',
}) `
  @font (20, bold);
  text-transform: Capitalize;
  padding-bottom: $spacing-small;
  @tablet-or-smaller() {
    @font (16, semi);
  }
`

export { OptionListWrap, StyledLabelHeader }