// Copyright (C) 2019-2021 Estonian Information System Authority.
// See the file 'LICENSE' for copying permission.

// provide 1:1 ratio scalability for an element
.ratio-1-1
  position: relative
  border: 0.0625rem solid $border
  width: 100%
  padding-top: calc(100% + (0.0625rem * 2)) // border width
  min-width: 10rem
  border-radius: $radius

  +dark-mode
    border-color: $dark

  .ratio-content
    position: absolute
    top: 50%
    left: 50%
    transform: translate(-50%, -50%)
    padding: $gap

    &.is-bottom
      bottom: 0
      top: auto
      transform: translateX(-50%)

// adds a gap*gap dot in front of anything, can use included colors
.dot
  display: inline-block
  width: $gap
  height: $gap
  background-color: $light
  vertical-align: middle
  border-radius: $gap
  margin: 0 $gap/2
  &.is-red
    background-color: $red
  &.is-yellow
    background-color: $yellow
  &.is-blue
    background-color: $blue

// extra support for fontawesome-directed toggle icons, to display properly
// directed icons based on the state of the element.

// @TODO this does not fit within the iconpack-agnostic approach
// @TODO just remove this pl0x, there has to be a better way
.visibility
  &-visible
    // support fa-chevron-* icons
    .chevron:before
      content: "\f078" !important
  &-hidden
    // suspport fa-chevron-* icons
    .chevron:before
      content: "\f054" !important

// creates a fade-in effect when hovered, useful when hiding secondary content
// from the complete visual
.has-hover-fadein
  opacity: .5
  transition: opacity 100ms linear
  &:hover
    opacity: 1

// defines a block for standing out the brand of the app with a few
// effects
.stand-out

  text-align: center
  margin-top: 7rem

  &.out
    display: block

  &-logo,
  &-payoff,
  &-continue
      opacity: 1
      transition: opacity 1s ease-in-out
      margin: $gap * 2 0
      .out > &
        opacity: 0
        transition: none

  &-payoff
    transition-delay: .5s

  &-continue
    transition-delay: 1s

.loader
  margin: $gap*2 auto
  text-align: center
  width: 15rem
  height: 15rem
  background-color: $white
  border-radius: 7.5rem
  .loader-icon
    display: flex
    align-items: center
    justify-content: center
    img, svg
      width: 75%
  & > p
    margin-top: 0

.logo-placeholder
  display: inline-block
  vertical-align: middle
  border-radius: 3rem
  width: 4rem
  height: 1.5rem
  background-color: rgba(255,255,255,.2)

  &.is-embossed
    background-color: rgba(0,0,0,.05)
    border-bottom: .062rem solid $white
    border-top: .062rem solid rgba(0,0,0,.1)

  &.is-big
    width: 12rem
    height: 3rem

.dark-mode-toggle

  position: relative
  margin-top: .1rem

  input[type="range"],
  .toggle-overlay
    height: 1.5rem
    width: 6rem
    border-radius: .75rem

  .toggle-overlay
    position: absolute
    top: 0
    left: 0
    display: flex
    justify-content: space-evenly
    align-items: center
    z-index: 1
    background-color: $light

    +dark-mode
      background-color: shade($dark, .3)

    .icon
      flex-basis: 100%
      font-size: .8em
      margin-top: .1rem
      text-align: center
      color: $dark

      +dark-mode
        color: $white

      &:nth-child(1)
        padding-left: .2rem
      &:nth-child(2)
        padding-left: .2rem
      &:nth-child(3)
        padding-left: .2rem

  input[type="range"]
    position: relative
    z-index: 2
    -webkit-appearance: none
    background: transparent
    border: 0
    height: 1.5rem
    width: 6rem
    border-radius: .75rem
    &::-webkit-slider-thumb
      -webkit-appearance: none
      width: 2rem
      height: 2rem
      margin-top: -.3rem
      background: transparent
      border: .2rem solid $border
      border-radius: 50%
    &::-moz-range-thumb
      width: 2rem
      height: 2rem
      margin-top: 0rem
      background: transparent
      border: .2rem solid $border
      border-radius: 50%
      box-sizing: border-box
    &::-webkit-slider-thumb:hover,
    &::-moz-range-thumb:hover
      border-color: $white
      cursor: pointer
