/*! UNY CSS Framework @1x | unycss.com | Copyright 2017 kokushin | MIT license */

@import "../core/variables.scss";
@import "../core/mixins.scss";

//
// Color scheme dark
// -----------------------------------


$theme-color-base:       #263238 !default;
$theme-color-accent:     #607d8b !default;
$theme-color-light:      #37474f !default;
$theme-color-text:       #f2f2f2 !default;
$theme-color-link:       #1976d2 !default;
$theme-color-background: color($theme-color-text a(.1)) !default;

$theme-gradation-color-start: $theme-color-base !default;
$theme-gradation-color-end:   $theme-color-accent !default;


//
// Core
//

::-webkit-input-placeholder {
  color: color($theme-color-text a(.3));
}

::-moz-placeholder {
  color: color($theme-color-text a(.3));
}

:-ms-input-placeholder {
  color: color($theme-color-text a(.3));
}

:-moz-placeholder {
  color: color($theme-color-text a(.3));
}

a { color: $theme-color-link; }

hr { background-color: $theme-color-light; }

body {
  background-color: $theme-color-base;
  color: $theme-color-text;
}


//
// Elements
//

pre {
  &:before {
    background-color: $theme-color-light;
    color: $theme-color-text;
  }

  code {
    border-color: $theme-color-light;
    background-color: $theme-color-background;
    color: $theme-color-text;
  }
}

code {
  background-color: $theme-color-background;
}

figure {
  figcaption {
    color: $theme-color-text;
  }
}

.video {
  .video-caption {
    color: $theme-color-text;
  }
}

.logo {
  color: $theme-color-text;

  a {
    outline-color: $theme-color-link;
    color: $theme-color-text;
  }
}

.button {
  background-color: $theme-color-accent;
  border-color: $theme-color-accent;

  &.is-burger,
  &.is-close {
    span {
      background-color: $theme-color-text;
    }
  }

  &.is-list {
    background-color: transparent;
    color: $theme-color-text;

    & + .button.is-list {
      border-color: $theme-color-light;
    }
  }

  &.is-icon {
    color: $theme-color-text;
  }
}

table {
  th {
    border-color: $theme-color-light;
  }

  tr {
    &:nth-child(even) {
      td {
        background-color: $theme-color-background;
      }
    }
  }
}

.input {
  &:not(label) {
    background-color: $theme-color-background;
    border-color: transparent;
    color: $theme-color-text;

    &:hover {
      border-color: $theme-color-background;
    }

    &:focus {
      border-color: $theme-color-link;
      box-shadow: 0 0 4px $theme-color-link;
    }
  }

  &.is-file {
    background-color: $theme-color-accent;
    border-color: $theme-color-accent;
    color: $theme-color-text;
  }

  &.is-select {
    background-color: $theme-color-accent;

    &:after {
      color: $theme-color-text;
    }

    > select {
      color: $theme-color-text;
      border-color: $theme-color-accent;

      &:focus {
        border-color: $theme-color-link;
        box-shadow: 0 0 4px $theme-color-link;
      }
    }
  }

  &.is-checkbox {
    &:hover {
      > span {
        &:before {
          border-color: $theme-color-accent;
        }
      }
    }

    > input[type=checkbox] {
      &:checked {
        & + span {
          &:before {
            background-color: $theme-color-accent;
            border-color: $theme-color-accent;
          }
        }
      }
    }
  }

  &.is-radio {
    &:hover {
      > span {
        &:before {
          border-color: $theme-color-accent;
        }
      }
    }

    > input[type=radio] {
      &:checked {
        & + span {
          &:before {
            background-color: $theme-color-accent;
            border-color: $theme-color-accent;
          }
        }
      }
    }
  }
}

.input-filename {
  color: color($theme-color-text a(.5));
}

.is-brand {
  background-color: $theme-color-accent;
}

.is-gradation {
  background: linear-gradient(270deg, $theme-gradation-color-start, $theme-gradation-color-end);
  background-size: 200% 200%;
  animation: isGradation 5s ease infinite;
  color: $theme-color-text;

  a {
    color: $theme-color-text;
  }
}

@keyframes isGradation {
  0%{
    background-position: 0% 50%;
  }
  50%{
    background-position: 100% 50%;
  }
  100%{
    background-position: 0% 50%;
  }
}

blockquote {
  border-color: $theme-color-light;
}


//
// Components
//

.content {
  background-color: $base-color;
}

.section {
  & + .section {
    border-top-color: $theme-color-light;
  }

  &.is-gray {
    background-color: $theme-color-light;
  }
}

.box {
  &.is-border {
    border-color: $theme-color-light;
  }
}

.header,
.footer {
  background-color: $theme-color-light;
}

.header {
  &.is-sticky {
    background-color: $theme-color-light;
  }
}

.header-menu {
  a {
    &:not(.button) {
      color: $theme-color-text;
    }
  }
}

.card {
  background-color: $theme-color-base;
  border-color: $theme-color-accent;

  &.is-clickable {
    > * {
      color: $theme-color-text;
    }
  }

  &.is-skeleton {
    border-color: $theme-color-light;

    > * {
      color: color($theme-color-text a(.3));
    }
  }

  &.is-dialog {
    .card-header,
    .card-content,
    .card-footer {
      border-color: $theme-color-light;
    }
  }
}

.offcanvas {
  .offcanvas-content {
    background-color: $theme-color-base;
  }

  .offcanvas-menu {
    a:not(.button) {
      color: $theme-color-text;
    }
  }
}

.sidebar {
  &:first-child {
    border-color: $theme-color-light;
  }

  &:not(:first-child) {
    border-color: $theme-color-light;
  }

  @include screen-medium() {
    &:first-child {
      border-color: $theme-color-light;
    }

    &:not(:first-child) {
      border-color: $theme-color-light;
    }
  }
}

.tab {
  .tab-list {
    border-color: $theme-color-light;

    a {
      background-color: $theme-color-base;
      border-color: $theme-color-light;
      color: $theme-color-text;

      &.is-current {
        color: $theme-color-link;
      }
    }
  }
  .tab-content {
    border-color: $theme-color-light;
  }
}

.navbar {
  a {
    &:not(.button) {
      color: $theme-color-text;
    }

    &.is-current {
      background-color: $theme-color-accent;
    }
  }
}

.tree {
  ul,
  ol {
    ul,
    ol {
      border-color: $theme-color-light;
    }

    > li {
      a {
        color: $theme-color-text;
      }

      &.is-current {
        > a {
          background-color: $theme-color-accent;
        }
      }
    }
  }
}

.hero {
  background-color: $theme-color-light;
}

.field {
  .button {
    color: $theme-color-text;
    background-color: $theme-color-accent;
    border-color: $theme-color-accent;
  }
}

.snackbar {
  background-color: $theme-color-accent;
}

.pulldown {
  .pulldown-content {
    background-color: $theme-color-base;
    border: 1px solid $theme-color-light;
  }
}

.tabbar {
  background-color: $theme-color-accent;

  a {
    &:not(.button) {
      color: $theme-color-text;
    }
  }

  .button.is-icon {
    color: $theme-color-text;
  }
}

.pager {
  border-color: $theme-color-light;

  > li {
    > a {
      border-color: $theme-color-light;
      color: $theme-color-text;
    }

    > span {
      &.is-current {
        border-color: $theme-color-accent;
        background-color: $theme-color-accent;
      }
    }
  }
}

.modal {
  .modal-content {
    > .inner {
      background-color: $theme-color-base;
    }
    > .card.is-dialog {
      .button {
        color: $theme-color-link;

        & + .button {
          border-color: $theme-color-light;
        }
      }
    }
  }
}