// Overrides
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700);

hr {
  background-color: lighten($grey-lighter, 5);
}

.button,
.control.has-icons-left .icon,
.control.has-icons-right .icon,
.input,
.pagination-ellipsis,
.pagination-link,
.pagination-next,
.pagination-previous,
.select,
.select select,
.textarea {
  height: 2.5em;
}

.content {
  letter-spacing: 0.04em;
}

.box {
  box-shadow: $shadow;
}

.button {
  border-radius: 3px;
  box-shadow: $shadow;
  text-transform: uppercase;
  font-weight: 500;
  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1),
    background-color 300ms ease;
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);

  &.is-hovered,
  &:hover {
    border-color: transparent;
    background-color: darken($button-background-color, 5);
  }

  &.is-active,
  &:active {
    box-shadow: $shadow-large;
  }

  &.is-focused,
  &:focus {
    border-color: transparent;
  }
  
  @each $name, $pair in $colors {
    $color: nth($pair, 1);
    $color-invert: nth($pair, 2);

    &.is-#{$name} {
      &.is-hovered,
      &:hover {
        background-color: darken($color, 5);
      }

      &.is-active,
      &:active {
        box-shadow: $shadow-large;
      }
    }
  }

  &.is-text {
    box-shadow: none;
  }

  &:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, #000 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform 0.5s, opacity 1s;
  }

  &:active:before {
    transform: scale(0, 0);
    opacity: 0.2;
    transition: 0s;
  }
}

.input {
  border: none;
  padding-left: 0;
  padding-right: 0;
  box-shadow: inset 0 -1px 0 $grey-lighter;
  transition: all 300ms;

  &.is-small {
    border-radius: 0;
  }

  &.is-active,
  &.is-focused,
  &:active,
  &:focus {
    box-shadow: inset 0 -2px 0 $input-focus-border-color;
  }
  @each $name, $pair in $colors {
    $color: nth($pair, 1);

    &.is-#{$name} {
      box-shadow: inset 0 -1px 0 $color;

      &.is-active,
      &.is-focused,
      &:active,
      &:focus {
        box-shadow: inset 0 -2px 0 $color;
      }
    }
  }

  &.is-disabled,
  &[disabled],
  &[readonly] {
    border-bottom: 1px dotted $grey-lighter;
    cursor: not-allowed;
  }
}

.textarea {
  box-shadow: none;
}

.select select {
  border: none;
  border-radius: 0;
  box-shadow: inset 0 -1px 0 $grey-lighter;
  transition: all 300ms;

  &.is-active,
  &.is-focused,
  &:active,
  &:focus {
    box-shadow: inset 0 -2px 0 $input-focus-border-color;
  }
}

.control {
  &.has-addons {
    .button,
    .input,
    .select {
      &:first-child,
      &:last-child {
        border-radius: 0;

        select {
          border-radius: 0;
        }
      }
    }

    .button {
      box-shadow: none;
    }
  }
}

.progress {
  height: $size-7;
  border-radius: $radius;

  &.is-small {
    height: 0.5rem;
  }
}

.card {
  box-shadow: $shadow;

  .card-header {
    box-shadow: none;
  }

  .card-footer,
  .card-footer-item {
    border: 0;
    text-transform: uppercase;
    font-weight: 500;
  }
}

.menu {
  .menu-list {
    a {
      border-radius: $radius;
      padding: $size-7;

      &.is-active {
        background-color: transparent;
        color: $link;
      }
    }
  }
}

.notification {
  box-shadow: $shadow;
  @each $name, $pair in $colors {
    $color: nth($pair, 1);
    $color-invert: nth($pair, 2);

    &.is-#{$name} {
      a:not(.button) {
        color: $color-invert;
        text-decoration: underline;
      }
    }
  }
}

.modal {
  .modal-background {
    background-color: rgba($black, 0.6);
  }

  .modal-card {
    box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2),
      0 13px 19px 2px rgba(0, 0, 0, 0.14), 0 5px 24px 4px rgba(0, 0, 0, 0.12);
  }
}

.navbar {
  &:not(.is-transparent) {
    box-shadow: $shadow;
  }

  .has-dropdown .navbar-item {
    @include desktop {
      color: $text;
    }
  }

  @include touch {
    .navbar-menu {
      background-color: inherit;
    }
  }

  @each $name, $pair in $colors {
    $color: nth($pair, 1);
    $color-invert: nth($pair, 2);

    &.is-#{$name} {
      @include touch {
        .navbar-menu {
          .navbar-item,
          .navbar-link {
            color: $color-invert;
            &.is-active {
              background-color: darken($color, 5);
            }
          }
        }
      }
    }
  }
}

.tabs {
  .is-active a {
    box-shadow: inset 0 -1px 0 $link;
  }

  &.is-boxed {
    .is-active a {
      border-top: 0;
      box-shadow: inset 0 2px 0 $link;
    }
  }
}

.panel {
  box-shadow: $shadow;

  .panel-block,
  .panel-heading,
  .panel-tabs {
    border-radius: $radius;
    border: none;
    padding: $size-7;
  }

  .panel-block.is-active {
    color: $primary;
  }

  .panel-tabs {
    a:hover {
      border-color: $link-hover;
      color: $link-hover;
    }
  }
}