.btn {
  &:focus {
    box-shadow: 0 0 0 2px $primary-color-lighten;
  }
}

.btn-primary,
.btn-primary:visited,
.btn-primary i {
  background-color: $primary-color !important;
  border-color: $primary-color !important;
  color: white !important;
}

.btn-primary:active,
.btn-primary:active:focus,
.btn-primary:active:hover,
.btn-primary:hover,
.btn-primary:hover i {
  background-color: $primary-color-darken !important;
  border-color: $primary-color-darken !important;
  color: white !important;
}

.btn-primary:focus {
  background-color: $primary-color-darken !important;
  border-color: $primary-color-darken !important;
  color: white !important;
  box-shadow: 0 0 0 2px $primary-color-lighten !important;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before{
  background-color: $primary-color !important;
  border-color: $primary-color !important;
  color: white !important;
}

a {
  color: $primary-color !important;
}

.oauth-signin {
  color: white !important;

  &:hover * {
    color: white !important;
  }
}

.btn-outline-primary {
  border-color: $primary-color !important;
  color: $primary-color !important;

  &:hover {
    background: $primary-color !important;
    color: white !important;
  }

  &:focus {
    box-shadow: 0 0 0 2px $primary-color-lighten !important;
  }
}

.header {
  & .avatar {
    background-color: $primary-color !important;
    color: white !important;
  }

  & a:hover:not(.btn) {
    color: $primary-color !important;
  }

  & .header-nav {
    border-color: $primary-color !important;
  }

  & .header-nav.active {
    color: $primary-color !important;
  }
}

.nav-tabs .nav-link{ 
  &.active {
    border-color: $primary-color !important;
  }

  &:not(.active){
    color: #9aa0ac !important;
    &:hover:not(.disabled) {
      border-color: $primary-color;
      color: $primary-color !important;
    }
  }
}

.dropdown-item {
  color: #6e7687 !important;
  &:hover {
    color: $primary-color !important;
    background-color: $primary-color-lighten !important;
    &.sort-disabled {
      background: #e6e6e6 !important;
      color: rgb(110, 118, 135) !important;
      opacity: 0.9;
    }
  }
  &:active, &.active {
    color: $primary-color !important;
    background-color: $primary-color-lighten !important;
  }
}

input:focus, select:focus {
  box-shadow: 0 0 5px $primary-color !important;
  border-color: $primary-color !important;
}

.list-group-item.active {
  background-color: $primary-color-lighten !important;

  &, .list-group-item.active * {
    color: $primary-color !important;
  }

  &.sort-disabled {
    background: #e6e6e6 !important;
    color: rgb(110, 118, 135) !important;
    opacity: 0.9 !important;
  }
}

.text-primary {
  color: $primary-color !important;
}

.bg-primary {
  background-color: $primary-color !important;
  color: white !important;
}

.btn-danger {
  color: white !important;
}

#clear-search {
  &:hover {
    color: $primary-color-darken !important;
  }
}

.pagination {
  .page-item {
    &.active a {
      color:white !important;
      background-color: $primary-color !important;
    }

    & a {
      color: $primary-color !important;
      border-color: $primary-color !important;
      white-space: nowrap;
    }

    & a:hover {
      background-color: $primary-color-lighten !important;
    }

    & a:focus {
      box-shadow: 0 0 3px $primary-color !important;
    }
  }
}

.primary-regular {
  background-color: $primary-color !important;
  border-color: $primary-color !important;
  color: white !important;
}

.primary-lighten {
  background-color: $primary-color-lighten !important;
  border-color: $primary-color-lighten !important;
  color: $primary-color !important;
}

.primary-darken {
  background-color: $primary-color-darken !important;
  border-color: $primary-color-darken !important;
  color: white !important;
}

.custom-switch-input:checked ~ .custom-switch-indicator {
  background-color: $primary-color !important;
  border-color: $primary-color-darken !important;
}

.custom-switch-input:focus ~ .custom-switch-indicator {
  box-shadow: 0 0 0 2px $primary-color-lighten;
  border-color: $primary-color-darken !important;
}

.custom-control-label::before {
  border-color: $primary-color-darken !important;
}

.manage-users-tab {
  &.selected {
    @extend .btn-primary;
  }
}

.room-block {
  &.current {
    box-shadow: 0 0 10px $primary-color-lighten;
  }
}

.btn-secondary {
  color: $primary-color;
  & i {
    color: $primary-color;
  }
}