clearfix()
  &:after
    content " "
    display block
    clear both

ellipsis()
  text-overflow ellipsis
  overflow hidden
  white-space nowrap

user-select()
  -webkit-user-select arguments
  user-select arguments

// colors: http://colorschemedesigner.com/#0542cw0w0w0w0
$blue=hsl(217, 83, 36)
$red=hsl(7, 100, 50)
$yellow=hsl(38, 100, 50)
$green=hsl(136, 100, 36)

$link-color=hsl(197, 100, 43)
$background-color=hsl(220, 96, 98)
$text-color=hsl(0, 0, 20)

$column-width=320px
$column-gutter=16px

$panel-padding = 12px
$column-content-width = $column-width - 2 * $panel-padding

gradient-background($color = $background-color, $lighten = 5%, $darken = 5%)
  background-color $color
  background linear-gradient(to bottom, lighten($color, $lighten), darken($color, $darken))

@import './icons'
@import './weather'

*
  padding 0
  margin 0

// fast click on Windows: see - http://bit.ly/1aPOfxR
a, input, button
  -ms-touch-action: none !important

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */
.hidden
  display none !important
  visibility hidden

.visible
  clearfix()

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */
.visuallyhidden
  border 0
  clip rect(0 0 0 0)
  height 1px
  margin -1px
  overflow hidden
  padding 0
  position absolute
  width 1px

// To be used for links rendered with font icons
// Chrome 19 was weird with clickability without this: http://css-tricks.com/examples/IconFont
.icon-alone
  display inline-block
  cursor pointer

.left
  float left

.right
  float right

body
  font-size: 1em
  font-family: Ubuntu, "Lucida Grande", Helvetica, Arial, sans-serif
  color $text-color

a
  color $link-color
  text-shadow 0 1px white
  transition color .3s ease
  text-decoration none
  user-select none
  -webkit-tap-highlight-color rgba(0,0,0,0)
  -webkit-tap-highlight-color transparent

  &:hover,
  &:active
    color saturate($link-color, 20%)

.panel
  clearfix()
  box-sizing border-box
  margin 0 ($column-gutter/2) $column-gutter
  width $column-width
  padding 0 $panel-padding
  float left
  background-color $background-color

  &:last-child
    margin-bottom 0

header .ls-furkot
  font-size .9em

.add-to-trip
  cursor pointer
  display block
  ellipsis()
  span + span
    margin-left .2em

.resort
  footer
    .add-to-trip
      margin-top .3em

.panel
  header,
  footer
    transition all .4s ease
    clearfix()

  header
    padding .7em 0 .5em
  footer
    padding 0 0 .7em

  header
    font-size 1.2em
    border-bottom solid 2px transparent
    vertical-align middle
    display flex
    align-items baseline
    gap .2em

    a
      outline none

  &.open
    header
      border-color rgba(black,.3)

.open
  .expandable
    opacity 1
    max-height 4500px
    min-height 5em

    .lifts-status
      position relative

      .opening-date
        position absolute
        width 100%
        height 100%
        z-index 1
        background-color rgba($background-color, .9)

        a
          position absolute
          top 50%
          margin-top -.6em
          font-size 1.2em
          width 100%
          text-align center

.expandable
  transition all .4s ease
  max-height 0
  overflow-y hidden
  opacity 0

.lifts
  list-style none
  margin .2em 0

  .lift
    display block
    line-height 2
    clearfix()

    .name
      float left
      max-width 90%
      cursor default
      ellipsis()

    .status
      font-size 1.1em
      float right
      text-shadow 1px 1px white
      padding-right 2px

.auto-refresh-reminder
  color lighten($text-color, 30%)
  font-style italic
  text-align right
  font-size .8em
  padding-right 2px

.ls-minimax:before
  content "\e031" // plus

.open
  .ls-minimax:before
    content "\e032" // minus

.ls-star:before
  content "\e036" // outline star

.starred
  .ls-star:before
    content "\e035" // full star

.resort-link
  font-size .9em

.resort-name
  flex 1
  ellipsis()

.summary
  list-style none
  clearfix()
  font-size .8em

  li
    float left
    margin-right .5em

    &:last-child
      margin-right 0

    [class^="ls-"],
    [class*=" ls-"],
    [class^="ls-"]:before,
    [class*=" ls-"]:before
      margin-right 2px

    [class^="ls-"]:before,
    [class*=" ls-"]:before
      text-shadow 1px 1px white

.summary-color-bar
  clearfix()
  width 100%
  margin-bottom .5em

  .open,
  .hold,
  .scheduled,
  .closed
    height 2px
    float left

  .open
    background-color $green
  .hold
    background-color $yellow
  .scheduled
    background-color $blue
  .closed
    background-color $red

.extras
  padding-bottom .7em

  .tile
    font-size .9em
    padding .5em 0

  .tile
    border-bottom solid 2px rgba(black, .3)

    &:last-child
      padding-bottom 0
      border-bottom none

  .notice
    margin-top .5em
    font-size .8em
    font-style italic
    display flex
    align-items center
    justify-content flex-end
    gap .5em

  .weather
    .weather-icon
      float left
      height 70px
      margin-top -10px
    .temperature
      float right
      font-size 1.5em
    .snow-conditions
      clear right
      float right
      font-size 1.1em
      margin-left 60px
      text-align right
    .snowforecast
      margin-left .5em
      font-weight bold
    .text
      clear both
    .notice
      img
        float none
        width 126px
        vertical-align bottom

  .webcams

    .swipe
      overflow hidden

      *
        touch-action pan-y !important

    .pager
      text-align center
      font-weight: bold;
      line-height 1.3

      a
        margin 0 2px
        padding 0 .3em
      .active:before
        content '●'
      .inactive:before
        content '○'

    li
      list-style none
      display inline-block
      max-width $column-content-width
      vertical-align top

    .webcam
      max-width 100%
      display inline-block

      >a
        display block
        position relative
        overflow-x hidden

        img
          margin 0 auto
          user-select none
          pointer-events none

          &.active
            display block
          &.inactive
            display none

        .title
          margin-bottom .5em
          text-align center

  .snow
    .value
      display inline-block
      min-width 2em
      text-align right

  .deals
    padding-bottom 0

    .deal
      clearfix()
      padding .4em 0
      line-height 1.5
      span
        float left
      a
        float right

.resort
  .deal
    font-size .9em
    margin-bottom .5em
    padding .5em 0
    border-bottom solid 2px rgba(black, .3)

    a
      float right

.stats
  .pie
    margin 1em 0
    width 294px
    height 294px
    border-radius 50%
    background-image conic-gradient(
      $green 0 var(--open),
      $yellow 0 var(--hold),
      $blue 0 var(--scheduled),
      $red 0
    )

  footer
    .summary li
      float none
      clear both
      line-height 2
      text-align right
      width 55%
      margin 0 auto

      span:first-child
        float left
      span:first-child:before
        margin-right .5em
      span:last-child
        float right

body > footer
  clear both
  margin-top 1em
  padding 0 .2em
  line-height 1
  text-align center

  .text
    display inline
    margin-left .2em

  a
    margin 0 .2em
    span
      color #666666
      transition color .3s ease
    &:hover
      span
        color black
      .ls-twitter
        color $twitter-color
      .ls-facebook
        color #3B5998

@import './about'
@import './tags'

contentWidth(n)
  return n == 1 ? $column-width : n * ($column-width + $column-gutter)

maxContent(n)
  .content-{n}
    max-width contentWidth(n)

.content
  clearfix()
  margin $column-gutter auto
  width contentWidth(7)


.widget
  font-size .8em

  .panel
    width 100%
    margin 0
    display block
    float none

  &.naked
    .panel
      background-color transparent
      padding 0

for col in 4 3 2 1
  maxContent(col)

  $max = contentWidth(col + 1)
  $media_query = 'screen and (max-width:' + $max + ')'
  @media $media_query
    .content
      width contentWidth(col)
    if col == 1
      .panel
        margin-right 0
        margin-left 0
      .tags
        margin 0

@media screen and (max-width: 720px)
  body > footer
    font-size 1.3em

    .text
      display none

@media screen and (max-width: 400px)
  .extras
    &.desktop
      display none

      img
        display none

    &.mobile
      display block

      img
        display block

@media screen and (min-width: 500px)
  .widget
    .lift
      float left
      margin-right 3%

@media screen and (min-width: 500px) and (max-width: 749px)
  .widget
    .lift
      width 48.5%
      &:nth-child(2n)
        margin-right 0


@media screen and (min-width: 750px) and (max-width: 999px)
  .widget
    .lift
      width 31.333%
      &:nth-child(3n)
        margin-right 0

@media screen and (min-width: 1000px)
  .widget
    .lift
      width 22.75%
      &:nth-child(4n)
        margin-right 0