@import "@/assets/sass/partials/mixins"

.color-reg

  @include scrollbar($mostly-black, #3a4a4e, #7dc071, #c08b00, #3c763d)

  color: $color-reg-main
  $cmn-btn-text-color: #d8d8d8

  a
    color: $color-reg-main

  *
    outline: none
  background: radial-gradient(rgba(30, 30, 30, 0.32), rgba(26, 26, 26, 0.85)), url('@/assets/img/aspalt.jpg')
  background-color: #222222

  .input
    @include box-shadow(inset 4px 6px 10px -4px rgba(0, 0, 0, 0.3), 0 1px 1px -1px rgba(255, 255, 255, 0.3))
    background: rgba(0, 0, 0, 0.2)
    border: 1px solid rgba(0, 0, 0, 1)
    color: $reg-theme-main-color
    text-shadow: $default-shadow
    font-family: Arial, serif

    &:focus
      box-shadow: inset 4px 6px 10px -4px rgba(0, 0, 0, 0.7), 0 1px 1px -1px rgba(255, 255, 255, 0.3)
      background: rgba(0, 0, 0, 0.35)
      @include transition(0.7s ease)
      transition-property: box-shadow, background

    &:-webkit-autofill
      @include box-shadow(0 0 0 1000px #30302A inset !important)
      -webkit-text-fill-color: #9BA577
      text-shadow: none

  .input option
    background-color: $mostly-black

  .green-btn
    @include linear-gradient-hover($cmn-btn-text-color, #457741)

  .red-btn
    @include linear-gradient-hover($cmn-btn-text-color, #A30000)

  .blue-btn
    @include linear-gradient-hover($cmn-btn-text-color, #353c4c)

  .lor-btn
    @include linear-gradient-hover($grayish-green, #4f5249)
