// elements
sup
  vertical-align: top
  font-size: 10px
  position: relative
  top: -1px

a
  text-decoration: none
  border-bottom: 1px dotted rgba(white, 0.25)
  cursor: pointer
  // color: $color__text
  &:hover
    text-decoration: none
    color: $gold
    border-bottom: none!important
  &:focus, &:visited
    text-decoration: none
    border-bottom: 1px dotted rgba(white, 0.25)

a.al-active
  color: $gold!important
  border-bottom: none!important
.al-activeAlt
  color: $monza!important
  border-bottom: 1px dashed $monza!important

a.al-link--dotted
  border-bottom: 1px dotted black
a.al-link--solid
  border-bottom: 1px solid rgba(white, 0.25)
a.al-link--dashed
  border-bottom: 1px dashed rgba(white, 0.25)

a.al-link--important
  color: black
  font-size: 18px
  font-weight: bold
  text-decoration: none
  border-bottom: 1px dashed rgba(black, 0.5)
  display: inline-block
  &:hover
    border-bottom: 1px solid transparent!important

a.al-link--significant
  color: black
  font-size: 18px
  text-decoration: none
  border-bottom: 1px dashed rgba(black, 0.5)
  margin-top: 10px
  margin-left: 15px
  display: inline-block
  &:hover
    border-bottom: 1px solid transparent!important

input, textarea
  transition: all 0.30s ease-in-out
  outline: none
  border: 1px solid darken(white, 25%)
  border-radius: 5px
  padding: 5px 5px
  font-size: 100%
  background-color: white
  background-image: none

input[type="button"], input[type='submit']
  cursor: pointer
  border: none
  background-image: none

input[type="search"]:focus, input[type="text"]:focus, input[type="password"]:focus, textarea:focus
  box-shadow: 0 0 5px $gold
  border: 1px solid $gold
  border-radius: 5px

ul.al-list--simple
  cursor: pointer
  font-size: 14px
  margin-left: 16px
  a
    color: black
    text-decoration: none
    border: none
    &:hover
      color: $monza
  li
    padding: 5px 0
    margin-left: 16px
  // li ul
  //   display: none
  .al-active ul
    // display: inline // ie fix
    // display: initial
    display: block
  // li ul li
    // margin-left: 20px
    // &:first-child
    //   padding-top: 15px
    // &:before
    //   content: none

.al-list--global
  @extend .al-list--simple
  margin-left: 0 !important
  padding: 10px
  border-top: 1px solid $mystic
  border-width: 1px 1px 0 1px
  border-style: solid
  border-image-width: 1px 1px 0 1px
  border-image-slice: 1
  border-image-source: linear-gradient(to bottom, $mystic, rgba(0, 0, 0, 0))
  li ul li
    &:first-child
      padding-top: 15px

.al-list--dropdown
  margin-left: 0!important
  &:before
    content: "\25B8"
    padding-right: 5px
    width: 16px
    display: inline-block
  &.al-active:before
    content: "\25BE"

.al-list--links
  cursor: pointer
  width: 100%
  font-size: 14px
  border-top: 1px solid $mystic
  span
    margin-right: 10px
  a
    color: black
    text-decoration: none
    border: none
    position: relative
    display: block
  li
    padding: 12px 10px
    border-bottom: 1px solid $mystic
  i
    position: absolute
    right: 8px
    top: 40%

.al-span--dashed
  text-decoration: none
  border-bottom: 1px dotted rgba(white,.25)

.al-span__symbol
  background-color: $mystic
  font-size: 30px
  font-weight: bold
  line-height: 0.5
  padding: 5px
  color: white
  text-align: center

.al-span__minus
  font-size: 30px
  line-height: 1
  text-align: center
  vertical-align: middle
  width: 30px
  display: block
  background-color: $mystic
  float: left
  border-right: 1px solid $wildblueyonder
.al-span__plus
  font-size: 30px
  line-height: 1
  text-align: center
  vertical-align: middle
  width: 30px
  display: block
  background-color: $mystic
  float: left
  border-left: 1px solid $wildblueyonder

.al-select__quantity
  border: 1px solid $wildblueyonder
  border-radius: 2px
  overflow: hidden
  display: inline-block
  min-width: 110px
  @include clearfix
  input
    float: left
    width: 50px
    height: 24px
    border-radius: initial
    border: none
    padding-left: 15%
    border-left: 1px solid $wildblueyonder
    border-right: 1px solid $wildblueyonder
  a
    float: left
    text-decoration: none
    border: none
    height: 24px
    &:hover
      text-decoration: none
      border: none

.al-loading
  // margin: 100px auto 0
  // width: 70px
  // text-align: center
  display: inline-block
  > div
    width: 18px
    height: 18px
    background-color: $wildblueyonder
    border-radius: 100%
    display: inline-block
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both
    animation: sk-bouncedelay 1.4s infinite ease-in-out both
  .al-bounce1
    -webkit-animation-delay: -0.32s
    animation-delay: -0.32s
  .al-bounce2
    -webkit-animation-delay: -0.16s
    animation-delay: -0.16s

@-webkit-keyframes sk-bouncedelay
  0%, 80%, 100%
    -webkit-transform: scale(0)

  40%
    -webkit-transform: scale(1)


@keyframes sk-bouncedelay
  0%, 80%, 100%
    -webkit-transform: scale(0)
    transform: scale(0)

  40%
    -webkit-transform: scale(1)
    transform: scale(1)