@charset 'utf-8';
@import '../../../assets/styles/variables.scss';

////
/// styles based on a dashboard component
/// @group Toolbar Component
////

/// Mixin that adds height and width to the toolbar icons
/// @access public
/// @author Adrián Castillo
/// @param {width} $width - property that stipulates the width of the icons
/// @param {height} $height - property that stipulates the height of the icons
/// @output 'chosen size of each icon according to your specification'
/// @example
/// this mixin assigns the first parameter width, the second parameter height
/// iconsizetoolbar (12px, 24px) --> (width: 12px, height: 24px, object-fit: contain, color: rgba(0, 0, 0, 0.26);)
/// iconsizetoolbar (40px, 64px) --> (width: 40px, height: 64px, object-fit: contain, color: rgba(0, 0, 0, 0.26);)
@mixin iconsizetoolbar($width, $height) {
  width: $width;
  height: $height;
  object-fit: contain;
  color: $grey-getronics;
}
/// definition of the size of the toolbar
.style-icons-toolbar {
  width: 18px;
  height: 18px;
  object-fit: contain;
  margin: 0px 14px;
}
/// space to separate the link
.example-link {
  padding: 0 1em;
}
/// tabbed space to separate the icons
.example-spacer {
  flex: 1 1 auto;
}
/// icon size menu
.menu {
  @include iconsizetoolbar(23.4px, 16px);
}
/// icon size logo
.logo {
  @include iconsizetoolbar(100px, 33px);
  padding-right: 10px;
  margin-left: 30px;
}
/// icon size reports
.reports {
  @include iconsizetoolbar(21.7px, 21.7px);
}
/// icon size message
.message {
  @include iconsizetoolbar(17.6px, 14px);
}
/// icon size notifications
.notifications {
  @include iconsizetoolbar(15.6px, 19px);
}
/// icon size user
.user {
  @include iconsizetoolbar(32.2px, 33px);
}
/// icon size shape
.shape {
  @include iconsizetoolbar(16.4px, 16.8px);
  margin-bottom: 3px;
}
/// icon size arrow
.arrow {
  @include iconsizetoolbar(6.8px, 4px);
}

.red {
  background-color: #fff;
}

.check-all-before-use {
  width: 18px;
  height: 18px;
  object-fit: contain;
  margin-left: 10px;
  margin-right: 10px;
}

.flex {
  display: flex;
  justify-content: space-between;
}

.right {
  margin-left: auto;
}

.text_font {
  font-family: Cairo-ExtraLight;
  color: $grey-getronics;
}

.align_menu_with_sidenav {
  margin-left: -2px;
}