/*
 * @copyright   Copyright (C) 2010-2024 Combodo SAS
 * @license     http://opensource.org/licenses/AGPL-3.0
 */

$ibo-preferences--panel--margin-x: auto !default;

$ibo-preferences--user-preferences--picture-placeholder--image--diameter: 54px !default;
$ibo-preferences--user-preferences--picture-placeholder--image--border-radius: $ibo-border-radius-full !default;
$ibo-preferences--user-preferences--picture-placeholder--image--margin: $ibo-spacing-400 !default;
$ibo-preferences--user-preferences--picture-placeholder--image--background-color: $ibo-color-grey-300 !default;
$ibo-preferences--user-preferences--picture-placeholder--image--border-color: $ibo-preferences--user-preferences--picture-placeholder--image--background-color !default;
$ibo-preferences--user-preferences--picture-placeholder--image--border: solid 3px $ibo-preferences--user-preferences--picture-placeholder--image--border-color !default;

$ibo-preferences--user-preferences--picture-placeholder--image--active--border-color: $ibo-color-blue-800;
$ibo-preferences--user-preferences--picture-placeholder--image--hover--border-color: $ibo-color-blue-600;

$ibo-keyboard-shortcut--shortcut--width: 30% !default;

$ibo-keyboard-shortcut--input--color: $ibo-color-grey-800 !default;
$ibo-keyboard-shortcut--input--background-color: transparent !default;
$ibo-keyboard-shortcut--input--border-color: $ibo-color-grey-500 !default;
$ibo-keyboard-shortcut--input--border:  1px solid $ibo-keyboard-shortcut--input--border-color !default;
$ibo-keyboard-shortcut--input--border-bottom:  2px solid $ibo-keyboard-shortcut--input--border-color !default;
$ibo-keyboard-shortcut--input--border-radius: $ibo-border-radius-300 !default;
$ibo-keyboard-shortcut--input--padding-y: $ibo-spacing-100 !default;
$ibo-keyboard-shortcut--input--padding-x: $ibo-spacing-200 !default;
$ibo-keyboard-shortcut--input--margin-bottom: 5px !default;

$ibo-keyboard-shortcut--input--is-focus--color: $ibo-color-primary-800 !default;
$ibo-keyboard-shortcut--input--is-focus--border-color: $ibo-color-primary-600 !default;

$ibo-favorite-organizations--toolbar--padding-top: $ibo-button--padding-y/2 !default;

#ibo-main-content >.ibo-panel{
  margin-left: $ibo-preferences--panel--margin-x;
  margin-right: $ibo-preferences--panel--margin-x;
}

.ibo-preferences--user-preferences--picture-placeholder{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.ibo-preferences--user-preferences--picture-placeholder--image{
  height: $ibo-preferences--user-preferences--picture-placeholder--image--diameter;
  width: $ibo-preferences--user-preferences--picture-placeholder--image--diameter;
  border-radius: $ibo-preferences--user-preferences--picture-placeholder--image--border-radius;
  margin: $ibo-preferences--user-preferences--picture-placeholder--image--margin;
  border: $ibo-preferences--user-preferences--picture-placeholder--image--border;

  > img{
    border-radius: $ibo-preferences--user-preferences--picture-placeholder--image--border-radius;
    background-color: $ibo-preferences--user-preferences--picture-placeholder--image--background-color;
  }
}
.ibo-preferences--user-preferences--picture-placeholder--image.ibo-is-active{
  border-color: $ibo-preferences--user-preferences--picture-placeholder--image--active--border-color;
}
.ibo-preferences--user-preferences--picture-placeholder--image:hover{
  border-color: $ibo-preferences--user-preferences--picture-placeholder--image--hover--border-color;
}

#ibo-form-for-user-interface-preferences > .ibo-keyboard-shortcut--shortcut{
  display: table;
  width: 100%;
  >*:not(.ibo-button){
    width: $ibo-keyboard-shortcut--shortcut--width;
    display: table-cell;
  }
}

.ibo-keyboard-shortcut--input, .ibo-keyboard-shortcut--input:focus{
  display: inline-block;
  width: auto;
  text-transform: capitalize;
  text-align: center;

  color: $ibo-keyboard-shortcut--input--color;
  background-color: $ibo-keyboard-shortcut--input--background-color;
  border: $ibo-keyboard-shortcut--input--border;
  border-bottom: $ibo-keyboard-shortcut--input--border-bottom;
  border-radius: $ibo-keyboard-shortcut--input--border-radius;

  padding: $ibo-keyboard-shortcut--input--padding-y $ibo-keyboard-shortcut--input--padding-x;
  margin-bottom: $ibo-keyboard-shortcut--input--margin-bottom;

  &.ibo-is-focus {
    text-transform: none;
    color: $ibo-keyboard-shortcut--input--is-focus--color;
    border-color: $ibo-keyboard-shortcut--input--is-focus--border-color;
  }
}

#ibo-favorite-organizations .ibo-toolbar {
  float: right;
  vertical-align: top;
}

#ibo-favorite-organizations .ibo-datatable--toolbar {
  padding-top: $ibo-favorite-organizations--toolbar--padding-top;
}