/**
 * Select
 */
.mdl-select
  position: relative
  font-size: 16px
  display: inline-block
  box-sizing: border-box
  width: 300px
  max-width: 100%
  margin-left: -4px
  padding: 20px 0

.mdl-select__input
  border: none
  border-bottom: 1px solid rgba(0, 0, 0, 0.12)
  display: inline-block
  font-size: 16px
  margin: 0
  padding: 4px 0
  width: 100%
  background: 16px
  text-align: left
  color: inherit

.mdl-select
  &.is-focused .mdl-select__input
    outline: none
  &.is-invalid .mdl-select__input
    border-color: rgb(222, 50, 38)
    box-shadow: none
  &.is-disabled .mdl-select__input
    background-color: transparent
    border-bottom: 1px dotted rgba(0, 0, 0, 0.12)

.mdl-select__label
  bottom: 0
  color: rgba(0, 0, 0, 0.26)
  font-size: 16px
  left: 0
  right: 0
  pointer-events: none
  position: absolute
  top: 26px
  width: 100%
  overflow: hidden
  white-space: nowrap
  text-align: left

.mdl-select.is-dirty .mdl-select__label
  visibility: hidden

.mdl-select--floating-label
  .mdl-textfield__label
    -webkit-transition-duration: 0.2s
    transition-duration: 0.2s
    -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
  &.is-focused .mdl-select__label, &.is-dirty .mdl-select__label
    color: rgb(33, 150, 243)
    font-size: 12px
    top: 4px
    visibility: visible
  &.is-focused .mdl-select__expandable-holder .mdl-select__label, &.is-dirty .mdl-select__expandable-holder .mdl-select__label
    top: -16px
  &.is-invalid .mdl-select__label
    color: rgb(222, 50, 38)
    font-size: 12px

.mdl-select__label:after
  background-color: rgb(33, 150, 243)
  bottom: 20px
  content: ''
  height: 2px
  left: 45%
  position: absolute
  -webkit-transition-duration: 0.2s
  transition-duration: 0.2s
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
  visibility: hidden
  width: 10px

.mdl-select
  &.is-focused .mdl-select__label:after
    left: 0
    visibility: visible
    width: 100%
  &.is-invalid .mdl-select__label:after
    background-color: rgb(222, 50, 38)

.mdl-select__error
  color: rgb(222, 50, 38)
  position: absolute
  font-size: 12px
  margin-top: 3px
  visibility: hidden

.mdl-select.is-invalid .mdl-select__error
  visibility: visible

.mdl-select__expandable-holder
  display: inline-block
  position: relative
  margin-left: 32px
  -webkit-transition-duration: 0.2s
  transition-duration: 0.2s
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
  display: inline-block
  max-width: 0.1px

.mdl-select
  &.is-focused .mdl-select__expandable-holder, &.is-dirty .mdl-select__expandable-holder
    max-width: 600px

.mdl-select__expandable-holder .mdl-select__label:after
  bottom: 0