import { styled } from 'styleh-components'

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);
  }
`

const Wrapper = styled.div``

export { OptionListWrap, StyledLabelHeader, Wrapper }