@import "variables";
@import "transitions";
@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;
}

.dbi{
   display: inline-block;
   width: 42px;
   height: 42px;
   background-size: cover;

   &.dbi-mysql{
      background-image: url('/svg/mysql.svg');
   }

   &.dbi-mssql{
      background-image: url('/svg/mssql.svg');
   }

   &.dbi-pg{
      background-image: url('/svg/pg.svg');
   }

   &.dbi-oracledb{
      background-image: url('/svg/oracledb3.svg');
   }
}

/*Override*/
.modal{
   .modal-overlay,
   &.active .modal-overlay{
      background: rgba(255, 255, 255, 0.15);
   }
   
   .modal-sm .modal-container,
   .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;
}