@import '~Colors';
@import '~Type';

.wrapper {
  background-color: $brand-secondary;
  //border:           0.2rem solid $gray;
  border-radius:    .5rem;
  overflow:         hidden;
  position:         relative;
  z-index:          1;
  height:           4rem;
  width:            20rem;
  margin:           5rem auto 0;
  &:after {
    content:          '';
    height:           1rem;
    width:            .5rem;
    border:           .5rem solid transparent;
    border-top-color: white;
    border-top-width: .75rem;
    position:         absolute;
    right:            1.5rem;
    top:              40%;
    z-index:          -1;
  }

  select {
    &, &:active, &:focus, &:hover {
      outline: none;
    }
    letter-spacing:     .1rem;
    font-size:          1.8rem;
    text-align:         center;
    text-transform:     capitalize;
    font-family:        $font-family-sans-serif;
    padding-left:       2rem;
    -webkit-appearance: none;
    color:              white;
    border:             none;
    background-color:   transparent;
    height:             100%;
    width:              120%;
    position:           absolute;
    top:                0;
    left:               0;
  }
}