/* ****************************************************************
/*         d8888          888    888
/*        d88888          888    888
/*       d88P888          888    888
/*      d88P 888  .d88b.  888888 88888b.   .d88b.  888d888
/*     d88P  888 d8P  Y8b 888    888 "88b d8P  Y8b 888P"
/*    d88P   888 88888888 888    888  888 88888888 888
/*   d8888888888 Y8b.     Y88b.  888  888 Y8b.     888
/*  d88P     888  "Y8888   "Y888 888  888  "Y8888  888
/*
/*  ===================================================
/*  https://github.com/noisek/aether | Noi Sek
/*
/*  TABLE OF CONTENTS:
/*    -- #0.1a Root Styles (You are here)
/*    -- #0.2a Page Body
/*    -- #0.3a Login Window
/*    -- #0.3b Command Panel
/*    -- #0.3c User Panel
/*    -- #0.4a Settings
/*    -- #0.4b Settings General
/*    -- #0.4c Settings Style
/*    -- #0.4d Settings Themes
/*    -- #0.5a Misc.
/*
/****************************************************************/

@import 'reset'
@import 'fonts'
@import 'config'
@import 'scroll'
@import 'utility'
@import 'animations'

html
  box-sizing: border-box

*, *:before, *:after
  box-sizing: inherit

body
  background: #222

  font-family: "Open Sans"

  overflow: hidden

  height: 100vh
  width: 100vw

  text-rendering: optimizeLegibility !important
  -webkit-font-smoothing: antialiased !important
  -moz-osx-font-smoothing: grayscale !important


/*****************************************************************
  -- #0.2a Page Body
  ===============================================================
  Body elements external to the login window itself.
/*****************************************************************/

.date
  color: #fff
  opacity: 0

  font-size: 0.75em
  font-style: italic
  text-align: right
  letter-spacing: 1px

  position: absolute
  top: 50%
  left: 50%

  margin: 265px 0px 0px -425px

  width: 850px

  transition: all 1s

  @extend .noselect

  &.loaded
    opacity: 1

  em
    font-weight: bold


.notifications-container
  position: absolute
  top: 10px

  overflow: hidden

  width: 100%

  .notification
    color: #2f0909
    background: rgba(252,237,238,0.75)
    border: 1px solid rgba(255, 255, 255, 0.15)

    position: relative
    top: -200px

    padding: 15px
    margin: 0 auto 25px auto

    width: 80vw

    z-index: 3

    animation: drop-in-notifications 0.5s forwards
    border-radius: 2px
    transition: opacity 0.5s

    &.error
      color: #fff
      background: rgba(180, 30, 30, 0.65)

    &.success
      background: rgba(120, 255, 64, 0.65)

    &.fadeout
      opacity: 0

.wallpaper-background, .wallpaper-foreground
  background-size: cover

  overflow: hidden
  position: fixed

  height: 100vh
  width: 100vw

  z-index: -1


.wallpaper-foreground
  opacity: 1

  &.fadeout
    animation: wallpaper-fade-out 600ms forwards
    animation-timing-function: ease-out

.cycler-preloader
  display: none

/*****************************************************************
  -- #0.3a Login Window
  ===============================================================
  Contains the actual login dialogue.
/*****************************************************************/

.login-window-container
  position: relative

  overflow: hidden

  height: 100vh
  width: 100vw


.login-window
  display: flex

  .command-panel
    display: flex
    flex-direction: column

    width: 30%

  .user-panel
    border-style: solid
    border-bottom: none
    border-width: 1px

    height: 100%
    width: 70%


.login-window
  overflow: hidden

  opacity: 0

  // Vertical Center
  position: absolute
  top: 50%
  left: 50%

  margin: -250px 0px 0px -425px

  height: 500px
  width: 850px

  border-radius: 4px
  transform: scale(0.7)

  animation: window-fade-in 0.5s forwards
  animation-delay: 200ms
  animation-timing-function: ease-out


.command-panel, .user-panel
  padding: $panel-padding-y $panel-padding-x


.user-panel .login-panel-main
  display: flex
  flex-direction: column

  // Vertically center when the avatar is hidden.
  .avatar-container.hidden + .login-form
    display: flex
    flex-direction: column
    justify-content: center

    height: 95%


.user-panel
  color: #fff
  border-bottom: none

  & > div
    height: 100%

  .login-panel-main
    position: relative
    z-index: 2

    height: 100%

    &.fadeout
      animation: login-fade-out 500ms ease forwards
      z-index: 1

    &.fadein
      animation: login-fade-in 200ms ease-out forwards

    .avatar-container
      height: 50%
      padding-top: 20px
      padding-bottom: 75px

      .avatar-background
        background: $avatar-background no-repeat center center

        margin: 0 auto

        height: 155px
        width: 154px

        transform: translateX(-10px)
        transition: all 1s

        &.avatar-background-hidden
          background: transparent

      .avatar-mask
        border-radius: 100%
        overflow: hidden

        height: 125px
        width: 125px

        transform: translate(20px, 15px)

      .user-avatar
        margin: 0 auto

        height: 125px
        width: 125px

    .login-form
      height: 45%
      display: block

      .user-username
        text-align: center
        text-transform: capitalize

        font-size: 2.66em
        font-style: italic
        font-weight: bold

        @extend .noselect

      .user-password-container
        margin: 15px auto
        width: 200px

      .user-password
        color: #fff

        background: none
        outline: none
        border: none
        border-bottom: 2px solid rgba(0, 0, 0, 0.06)

        font-size: 14pt
        font-weight: bold
        letter-spacing: 2px

        padding-left: 0.5em
        padding-right: 0.5em

        width: 100%

        transition: opacity 1s, border-bottom 150ms ease

        &:focus, &:active
          border-bottom: 2px solid rgba(255, 255, 255, 0.8)

        &::-webkit-input-placeholder
          color: rgba(255, 255, 255, 0.4)
          @extend .noselect

        &.error
          animation: error-shake 600ms forwards

        &.error, &.error:focus, &.error:active
          border-bottom: 2px solid rgba(175, 3, 3, 0.6)

        &.error::-webkit-input-placeholder
          color: #af0303

      .submit-row
        $submit-row-width: 200px

        margin: 0 auto
        width: $submit-row-width

        position: absolute
        left: (($login-panel-width / 2) - ($submit-row-width / 2)) - $panel-padding-x

        .left, .right
          display: inline-block
          float: left

        .left
          width: 80%

        .left .dropdown
          font-size: 0.75em

          width: 95%

          @extend .noselect

          &:hover
            cursor: pointer

        .right
          width: 20%

        .right .submit-button
          box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.05)

          &:hover
            cursor: pointer

            polygon
              transform: scale(1.1) translateX(2px)


          & > div
            position: relative
            left: 8px

          input[type=submit]
            display: none

          svg
            background-color: currentColor

            height: 30px

            filter: drop-shadow(0px 2px 1px rgba(0, 0, 0, 0.10))
            border-radius: 4px

            circle
              // fill: rgba(255, 255, 255, 0.35)
              r: 0

            polygon
              stroke: rgba(42, 19, 15, 0.05)
              stroke-width: 1px

              transform: scale(1) translateX(0px)
              transform-origin: center

              transition: all 200ms cubic-bezier(0.64, 0.15, 0.18, 0.52)

      .submit-row-container
        position: relative

      .left .dropdown .dropdown-item
        color: #525252
        display: none

        padding: 8px 10px

        transition: background-position-y 200ms ease

        &:not(.active):hover
          background: rgba(255, 255, 255, 1)

        &:not(.active)
          background: rgba(255, 255, 255, 0.9)

      .left .dropdown .dropdown-item.active
        color: #fff
        display: block

        background-image: $dropdown-caret
        background-repeat: no-repeat
        background-position: 90% 50%
        position: relative

        font-family: "Open Sans"
        font-weight: bold
        font-style: italic
        line-height: 1.2em

        text-overflow: ellipsis
        overflow: hidden
        white-space: nowrap

        padding-right: 30px

        border-radius: 2px

        box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.05)
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.12)

      .left .dropdown.active
        .dropdown-item
          display: block

        .dropdown-item.active
          background-position: 90% 65%

  .login-panel-switcher
    display: block
    opacity: 0

    position: relative
    top: -100%

    z-index: 1

    height: 100%

    &.active
      animation: 200ms switcher-fade-in ease-out forwards
      animation-delay: 150ms

      z-index: 2

    &.fadeout
      animation: 200ms switcher-fade-out ease-out forwards

    ul
      list-style-type: none
      transform-style: preserve-3d

      padding-top: 100px
      height: 95%

    li
      display: inline-block
      padding-top: 25px

      width: 33.33%

      transition: -webkit-filter 200ms, opacity 300ms

      .avatar-background
        background: $avatar-background no-repeat center center

        margin: 0 auto

        height: 155px
        width: 154px

        transform: translateX(-10px)
        transition: all 1s

        &.avatar-background-hidden
          background: transparent

      .avatar-mask
        border-radius: 100%
        overflow: hidden

        height: 125px
        width: 125px

        transform: translate(20px, 15px)

      .avatar-name
        text-align: center

        .username
          font-size: 16pt
          font-weight: bold
        .real-name
          font-size: 12pt
          font-style: italic

      .user-avatar
        margin: 0 auto

        height: 125px
        width: 125px

    li:not(.active)
      display: none
      -webkit-filter: blur(1px)

      &:hover
        cursor: pointer
        opacity: 0.9
        -webkit-filter: blur(0.5px)

    li.active
      transform: translateZ(10px)

    li.previous, li.next
      display: inline-block
      opacity: 0.8

    li.previous
      transform: translate3d(50px, 0px, -10px) scale(0.9)

    li.next
      transform: translate3d(-50px, 0px, -10px) scale(0.9)

    .header
      font-size: 11pt
      font-style: italic
      text-align: center
      letter-spacing: 1px

      position: absolute

      height: 5%
      width: 100%

      em
        font-weight: bold

  .login-panel-main .bottom, .login-panel-switcher .bottom
    padding-top: 15px
    height: 5%

    .left
      color: #fff
      float: left

      font-size: 0.75em
      letter-spacing: 1px

    .left
      font-weight: bold
      width: 30%

      @extend .noselect

      &:hover
        cursor: pointer

/*****************************************************************
  -- #0.3b Command Panel
  ===============================================================
  Contains the system 'commands'.
/*****************************************************************/

.command-panel
  color: #fff
  height: 100%

  .distro-logo
    background: $distro-logo no-repeat center center

    margin: 0px auto

    height: 125px
    width: 125px

    transition: opacity 400ms

    &:hover
      cursor: pointer

    &:active
      opacity: 0.8

  .distro-wrapper
    padding-top: 35px

    height: 52%

    .options
      position: relative
      top: -100px
      opacity: 0

      &.active
        animation: drop-in-options 200ms forwards
        animation-timing-function: ease-out

      .button-accept, .button-reject
        background: rgba(0, 0, 0, 0.2)
        position: relative
        opacity: 0.4

        text-align: center

        margin-top: 10px
        padding: 7px 8px

        height: 30px
        width: 30px

        border-radius: 100%

        &:hover
          cursor: pointer
          opacity: 1


      .button-accept
        float: right
        left: -15%

        &:hover
          background: #6e9200

      .button-reject
        float: left
        left: 15%

        &:hover
          background: #b93300

    .options-wrapper
      overflow: hidden

      height: 45px
      width: 100%


  .command
    display: flex
    margin-bottom: 25px

    transition: all 0.5s

    @extend .noselect

    &:hover
      cursor: pointer
      opacity: 0.6

  .commands-wrapper
    height: 43%

  .command .icon-wrapper, .command .text
    display: inline-block

    @extend .noselect

  .command .icon-wrapper
    margin-right: 10px
    width: 30px

  .command .icon-wrapper svg
    height: 20px
    width: 30px

  .command .icon-wrapper svg > *
    fill: currentColor

  .command .text
    font-size: 1.33em
    letter-spacing: 2px
    text-transform: uppercase
    vertical-align: 2px

    width: 100%

  .bottom
    height: 5%
    padding-top: 15px

  .bottom .left, .bottom .right
    float: left

    font-size: 0.75em
    font-weight: bold
    letter-spacing: 1px

  .bottom .left
    color: rgba(255, 255, 255, 0.65)

    overflow: hidden

    text-overflow: ellipsis
    text-transform: uppercase
    white-space: nowrap

    width: 70%

    @extend .noselect

  .bottom .right
    text-align: right

    opacity: 0

    width: 30%

    transition: opacity 1s

    @extend .noselect

  .bottom .clock.loaded
    opacity: 1


/*****************************************************************
  -- #0.4a Settings
  ===============================================================
  Settings dialogue.
/*****************************************************************/

.settings
  display: flex

  position: absolute

  width: 600px

  opacity: 1

  & > div
    display: flex
    flex-wrap: wrap

    width: 100%

  .settings-categories
    width: 17%

  .settings-section
    display: flex
    flex-direction: column

    width: 83%

  .settings-section .save-dialogue
    display: flex
    justify-content: flex-end


.settings .settings-categories
  ul li
    color: hsl(0, 0%, 61%)
    background: hsl(0, 0%, 88%)

    font-weight: bold
    font-variant: small-caps

    padding: 15px 25px

    transition: color 300ms ease, background-color 300ms ease

  ul li:hover
    cursor: pointer

    color: hsl(0, 0%, 30%)
    background: hsl(0, 0%, 91%)

  ul li.active, ul li.active:hover
    color: hsl(0, 0%, 30%)
    background: hsla(0, 0%, 98%, 1)


.settings .settings-handle
  background: #222
  height: 25px
  width: 100%

  &:hover
    cursor: -webkit-grab

  &:active
    cursor: -webkit-grabbing !important

  &:active:hover
    cursor: -webkit-grabbing !important

  ul
    display: flex
    justify-content: flex-end

    overflow: hidden

    height: 100%
    width: 100%

    li
      color: #000
      font-weight: bold

      padding: 5px 15px
      height: 100%

    li:hover
      cursor: pointer

    li.settings-minimize
      color: #fff
      background: #424242

    li.settings-close
      background: #de3838


.settings .settings-section
  background: hsla(0, 0%, 98%, 1)

  ul h4
    font-weight: bold

  ul hr
    background: #ececec
    color: #ececec
    border: 1px solid #ececec

  ul li
    list-style-type: none
    margin-bottom: 10px

  ul li + h4
    margin-top: 35px

  ul li input[type='checkbox']
    position: absolute
    left: -9999px

  ul li input[type='text']
    display: inline-block

    padding: 5px

    margin-top: 15px
    margin-left: 15px

    width: 50%

    border: 1px solid #e0e0e0

  ul li label:hover
    cursor: pointer

  ul li input[type='checkbox'] + label .fake-checkbox
    color: hsl(0, 45%, 21%)

    display: inline-block
    background: hsl(0, 49%, 90%)

    font-weight: bold

    padding: 10px
    margin-left: 10px

    position: relative
    top: 5px

    height: 15px
    width: 15px

    border: 1px solid #e8e8e8
    border-radius: 4px

    &:hover
      cursor: pointer

  ul li input[type='checkbox']:checked + label .fake-checkbox
    color: hsl(101, 45%, 21%)
    background: hsl(100, 50%, 90%)

  ul li input[type='checkbox'] + label .fake-checkbox:after
    display: inline-block
    content: "×"

    font-size: 1.4em

    position: absolute
    top: -0.05rem
    left: 0.25rem

  ul li input[type='checkbox']:checked + label .fake-checkbox:after
    display: inline-block
    content: "✔"

    font-size: 1em

    position: absolute
    top: 0.1rem
    left: 0.2rem

  label + select
    margin-left: 10px
    width: 50%

  select
    padding: 5px


.settings-section .save-dialogue
  background: #f3f3f3
  border-top: 1px solid #eee

  padding: 10px 15px

  button
    outline: none
    border: none

    padding: 5px 8px 8px 8px
    margin-left: 10px

    border-radius: 2px

  button:hover
    cursor: pointer

  button.settings-reject
    color: #581212
    background: #f35e5e

  button.settings-save
    color: #145a07
    background: #84ff93


.settings-toggler
  color: #222
  background: #fff
  opacity: 0

  font-weight: bold
  font-size: 4em
  text-align: center

  position: fixed
  bottom: 25px
  left: 25px

  padding-top: 8px

  height: 85px
  width: 85px

  border-radius: 100px
  user-select: none
  transition: opacity 300ms ease

  &:hover
    cursor: pointer

    opacity: 1


/*****************************************************************
  -- #0.4b Settings General
  ===============================================================
  General Settings section.
/*****************************************************************/

.settings-general
  display: flex

  padding: 25px

  .left
    padding: 15px
    width: 40%

  .right
    padding: 15px
    width: 60%


.settings-general .left
  border-right: 2px solid #eee

  h6
    font-size: 0.8em
    font-weight: bold

    margin-top: 30px

  li
    list-style-type: none

  select
    margin: 15px 0px 0px 0px
    padding: 5px

    width: 100%

  select:hover
    cursor: pointer

  select option:hover
    cursor: pointer

  .preview-logo img
    display: block
    margin: 0 auto


.settings-general .right
  height: 400px
  overflow-y: scroll

/*****************************************************************
  -- #0.4c Settings Style
  ===============================================================
  Style Settings section.
/*****************************************************************/

.settings-style
  display: flex

  padding: 25px

  .left
    padding: 25px
    width: 100%

  .right
    padding: 25px

    width: 100%

  .right .color-group
    display: flex
    flex-wrap: wrap
    justify-content: space-between

  .right .swatch-container
    display: flex
    justify-content: space-between
    width: 100%

  .right .swatch-container .swatch
    display: flex
    flex-wrap: wrap

  .right .swatch-container .swatch .swatch-bg
    flex-grow: 1


.settings-style
  .left
    border-right: 2px solid #eee

  .left li
    display: flex
    align-items: center

  .left li label
    flex-grow: 2
    width: 100%

  .left ul li input[type='text']
    flex-shrink: 2
    margin-top: 0px

  .right .color-group .settings-color:last-of-type
    margin-bottom: 35px

  .right .settings-item.settings-color
    margin-top: 15px
    width: 48%

  .right .settings-item.settings-color label
    display: block
    overflow: hidden

    font-size: 0.8em
    text-transform: uppercase
    text-overflow: ellipsis
    white-space: nowrap

    width: 100%

  .right .settings-item.settings-color .swatch-container
    position: relative
    margin-top: 10px

    input[type='text']
      display: inline-block

      margin-left: 0
      margin-top: 0

      width: 46%

    .swatch
      border: 5px solid #ffffff

      height: 35px
      width: 100%

      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15)
      transition: box-shadow 1000ms ease

      &:hover
        cursor: pointer
        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35)

      .swatch-bg
        flex-grow: 1

        position: relative
        top: -12.5px

        height: 12.5px
        width: 1%

        z-index: 1

      .swatch-bg-black
        background: #000

      .swatch-bg-white
        background: #fff

      .swatch-bg-gray
        background: #808080

      .swatch-fg
        height: 25px
        width: 100%

        z-index: 2

  .right .settings-item.settings-color .swatch-container.active
    .chrome-picker
      position: absolute
      left: 90px
      z-index: 4

    .colorpicker-background
      position: fixed

      top: 25px
      right: 0
      bottom: 0
      left: 100px

      height: 100vh
      width: 100vw

      z-index: 3


/*****************************************************************
  -- #0.4d Settings Themes
  ===============================================================
  Themes Settings section.
/*****************************************************************/

.settings-themes
  max-height: 450px
  overflow-y: scroll

  .theme
    margin: 15px 0px
    padding: 10px

    ul
      display: flex
      list-style-type: none

      margin-top: 10px

    li.theme-color-block
      display: inline-block

      border: 2.5px solid #fff

      margin: 5px

      height: 50px
      width: 50px

      box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.05)

      transform: translateY(0px)
      transition: transform 250ms ease-in, box-shadow 250ms ease-in, border 250ms ease-in

      &:hover
        border: 2.5px solid #222
        cursor: pointer
        box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4)
        transform: translateY(-3px)

    .upper
      button
        color: #222
        background: #eee
        outline: none
        border: none

        padding: 5px 8px 8px 8px
        margin-left: 10px

        border-radius: 2px

        &:hover
          cursor: pointer

      button.delete
        color: #581212
        background: #f35e5e

      .theme-name
        display: inline-block

        font-weight: bold

        margin-right: 15px

  .theme-saver
    background: #eee
    border-bottom: 1px solid #eaeaea

    padding: 15px

    p
      margin-bottom: 12px

    input
      border: 1px solid #e0e0e0

      margin-right: 5px
      padding: 5px

    button
      color: #222
      outline: none
      border: none

      padding: 5px 8px 8px 8px
      margin-left: 10px

      border-radius: 2px

      &:hover
        cursor: pointer


/*****************************************************************
  -- #0.5a Misc. Styles
  ===============================================================
  Misc.
/*****************************************************************/

.minimize
  height: 0px !important
  overflow: hidden !important
