@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap')
@import "../../Constants"

html, body, #root
  width: 100%
  height: 100%

body, pre, textarea
  font-family: 'Roboto', sans-serif

h1, h2, h3, h4, h5, h6, p, body, pre
  margin: 0

body
  padding: 0

  --main-color: #{$mainColor}
  --sec-color: #{$secondaryColor}
  --link-color: #{$linkHoverColor}

  --main-bg-color: #{$primaryBackgroundColor}
  --sec-bg-color: #{$secondaryBackgroundColor}
  --block-color: #{$blockBackgroundColor}
  --block-sec-color: #{$blockSecondaryBackgroundColor}
  --nav-bg-color: #{$navbarBackgroundColor}

  --error-bg-color: #{$errorBackgroundColor}
  --success-bg-color: #{$successBackgroundColor}

  color: var(--main-color)
  background: var(--main-bg-color)

pre
  white-space: pre-wrap

body[theme='red']
  --main-bg-color: #{$primaryBackgroundColorRed}
  --sec-bg-color: #{$secondaryBackgroundColorRed}
  --block-color: #{$blockBackgroundColorRed}
  --block-sec-color: #{$blockSecondaryBackgroundColorRed}
  --nav-bg-color: #{$navbarBackgroundColorRed}

body[theme='blue']
  --main-bg-color: #{$primaryBackgroundColorBlue}
  --sec-bg-color: #{$secondaryBackgroundColorBlue}
  --block-color: #{$blockBackgroundColorBlue}
  --block-sec-color: #{$blockSecondaryBackgroundColorBlue}
  --nav-bg-color: #{$navbarBackgroundColorBlue}

body[theme='green']
  --main-bg-color: #{$primaryBackgroundColorGreen}
  --sec-bg-color: #{$secondaryBackgroundColorGreen}
  --block-color: #{$blockBackgroundColorGreen}
  --block-sec-color: #{$blockSecondaryBackgroundColorGreen}
  --nav-bg-color: #{$navbarBackgroundColorGreen}

body[theme='light']
  --main-color: #{$mainColorLight}
  --link-color: #{$linkHoverColorLight}
  --sec-color: #{$secondaryColorLight}

  --main-bg-color: #{$primaryBackgroundColorLight}
  --sec-bg-color: #{$secondaryBackgroundColorLight}
  --block-color: #{$blockBackgroundColorLight}
  --block-sec-color: #{$blockSecondaryBackgroundColorLight}
  --nav-bg-color: #{$navbarBackgroundColorLight}

body[theme='win95']
  --main-color: #{$mainColorLight}
  --link-color: #{$linkHoverColorLight}
  --sec-color: #{$secondaryColorLight}

  --main-bg-color: #008083
  --sec-bg-color: #c0c0c0
  --nav-bg-color: #c0c0c0

  .Navbar
    box-shadow: 0 1px 1px 1px white

a
  color: var(--main-color)
  text-decoration: none

  &:hover
    color: var(--link-color)

*
  scrollbar-color: #eee #222
  scrollbar-width: thin

.Container
  max-width: 1200px
  min-height: calc(100vh - 16rem)
  margin: .5rem auto

  .Notifications
    @media (min-width: 500px)
      padding: 1rem
      box-sizing: border-box

.Successful, .Error
  border: var(--link-color) 1px solid
  padding: .5rem
  border-radius: 3px
  margin-bottom: 1rem

.Error
  color: #{mainColor}
  background-color: var(--error-bg-color)

.Successful
  color: #{mainColor}
  background-color: var(--success-bg-color)