/*------------------------------------*\
  #COMPONENTS-FORM-SELECT
\*------------------------------------*/


/*
 * Form Select
 */
.c-form-select {
  border: 1px solid var(--color-neutral-30);
  border-radius: var(--border-radius-default);
  box-shadow: var(--box-shadow-default);
  width: 100%;
  overflow: hidden;
  position: relative;
  background: url('image.svg') right 0.5rem center no-repeat;

  &:focus {
    border: 1px solid var(--color-neutral-50);
  }

  &:before {
    position: absolute;
    content: "\2B0D ";
    font-size: var(--font-size-50);
    font-weight: 600;
    top: 0;
    bottom: 0;
    line-height: 150%;
    right: var(--space-default);
    pointer-events: none;
  }

  & select {
    border: none;
    box-shadow: none;
    background: transparent;
    background-image: none;
    -webkit-appearance: none;

    color: inherit;
    display: block;
    font-family: var(--font-family-body);
    font-size: var(--font-size-30);
    margin: 0;
    padding: var(--space-20);
    vertical-align: baseline;
    width: 100%;

    &:focus {
      outline: 0;
    }
  }
}
