@import "variables";
@import "mdi-additions";
@import "~spectre.css/src/spectre";

body{
   user-select: none;
}

/*Additions*/
@include margin-variant(3, $unit-3);
@include margin-variant(4, $unit-4);
@include padding-variant(3, $unit-3);
@include padding-variant(4, $unit-4);

.btn.btn-gray{
   color: #fff;
   background: $bg-color-gray;

   &:hover{
      background: $bg-color;
   }
}

.p-vcentered{
   display: flex!important;
   align-items: center;
}

/*Override*/
.modal-overlay,
.modal.active .modal-overlay{
   background: rgba(255, 255, 255, 0.15);
}

.modal-container{
   box-shadow: 0 0 1px 0px #000;
   padding: 0;
   background: $bg-color;

   .modal-header{
      padding: .4rem .8rem;
      text-transform: uppercase;
      background: $bg-color-gray;
      display: flex;
      justify-content: space-between;
      align-items: center;
   }
}

.form-select{
   cursor: pointer;
}

.form-select,
.form-select:not([multiple]):not([size]),
.form-input,
.form-checkbox .form-icon, 
.form-radio .form-icon{
   border-color: $bg-color-light;
   background: $bg-color-gray;
}

.form-select:not([multiple]):not([size]):focus{
   border-color: $primary-color;
}