@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
@require '../style/var.styl';

[igolistitem][color="primary"].igo-list-item-selected {
  background-color: $primary-color;
}

[igolistitem][color="accent"].igo-list-item-selected {
  background-color: $accent-color
}

[igolistitem][color="primary"]:hover {
  background-color: lightness($primary-color, 80%);
}

[igolistitem][color="accent"]:hover {
  background-color: lightness($accent-color, 80%);
}

table.igo-striped tbody tr:nth-child(odd) {
  background-color: rgba(103, 58, 183, 0.12);
}

igo-panel .igo-panel-header {
  background-color: $primary-color;
  color: rgb(255, 255, 255);
}

igo-panel .igo-panel-header .mat-icon {
  color: rgb(255, 255, 255);
}

mat-progress-spinner path {
  stroke: $primary-color;
}

button.mat-icon-button.mat-primary:enabled:hover {
  color: #4300b8;
}

button.mat-icon-button.mat-warn:enabled:hover {
  color: #ff1100;
}

igo-mini-basemap > .igo-mini-basemap-container:hover {
  border: 2px solid alpha($primary-color, 0.7);
  .igo-mini-basemap-title {
    color: $primary-color;
  }
}

.ol-attribution button {
  color: $primary-color;
}

.ol-scale-line-inner {
 border:2px solid $primary-color;
 border-top:none;
 color:$primary-color;
}

// --------- Calendar ------------

mat-datetimepicker-calendar {
  .mat-datetimepicker-calendar-header {
    background-color: $primary-color;
  }

  .mat-datetimepicker-calendar-body-cell-content {
    &.mat-datetimepicker-calendar-body-selected {
      background-color: $primary-color;
      color: white;
    }

    &.mat-datetimepicker-calendar-body-disabled > .mat-datetimepicker-calendar-body-selected {
      background-color: rgba($primary-color, 0.4);
    }

    &.mat-datetimepicker-calendar-body-today {
      &:not(.mat-datetimepicker-calendar-body-selected) {
        border-color: $primary-color;
      }

      &.mat-datetimepicker-calendar-body-selected {
        box-shadow: inset 0 0 0 1px $primary-color;
      }
    }
  }

  .mat-datetimepicker-clock-center {
    background-color: $primary-color;
  }

  .mat-datetimepicker-clock-hand {
    background-color: $primary-color;

    &::before {
      background-color: $primary-color;
    }
  }

  .mat-datetimepicker-clock-cell {
    &.mat-datetimepicker-clock-cell-selected {
      background-color: lighten($primary-color, 5);
    }
  }
}