/*****************************************************************************/
/** NOTE: Do not use 'pt' sizes in declarations. Use 'px' only **/
/* Dropdown == QComboBox                                                     */
/* Div      ~=  QFrame                                                       */

/* For custom widgets use [<state>="<lowercased boolean>"]                   */
/* :checked   == [checked="true"]                                            */
/* :disabled  == [disabled="false"]                                          */
/* :enabled   == [enabled="true"]                                            */
/* :focus     == [focused="true"]                                            */
/* :hover     == [hovered="true"]                                            */
/* :pressed   == [pressed="true"]                                            */
/*****************************************************************************/


/*****************************************************************************/
/* Brand Colors                                                              */
/*****************************************************************************/
$color-primary: #43B02A;
$color-primary-alt-1: #007041;
$color-primary-alt-2: #A4D65E;
$color-secondary: #00A3E0;
$color-secondary-alt-1: #006298;
$color-secondary-alt-2: #8BD3E6;
$color-black: #101820;
$color-gray-1: #253746;
$color-gray-2: #4F7588;
$color-grayscale-1: #E0E0E0;
$color-grayscale-2: #F5F5F5;
$color-grayscale-3: #FAFAFA;
$color-grayscale-4: #FFFFFF;

$color-danger: #BA0C2F;


/*****************************************************************************/
/* Mixins                                                                    */
/*****************************************************************************/
@mixin button() {
  margin: 0px;
  outline: none;  /* Remove the focus rectangle in Ubuntu and OSX */
  padding: 0px 10px;
  @include height(22px);

  &:focus {
    text-decoration: underline;
  }

  &:disabled {
    background: #ccc;
  }
}

@mixin button-filled($background-color, $text-color:black) {
  background: $background-color;
  border: 1px solid transparent;
  color: $text-color;
  @include button();

  &:focus,
  &:hover {
    background: darken($background-color, 5%);
  }

  &:pressed {
    background: darken($background-color, 10%);
  }
}

@mixin button-hollow($border-color, $text-color:black) {
  background: white;
  border: 1px solid $border-color;
  color: $text-color;
  @include button();

  &:focus,
  &:hover {
    background: lighten($border-color, 20%);
    color: $text-color;
  }

  &:pressed {
    background: darken($boder-color, 5%);
  }
}

@mixin width($value) {
  max-width: $value;
  min-width: $value;
}

@mixin height($value) {
  max-height: $value;
  min-height: $value;
}

/*****************************************************************************/
/* Global Qt Styles                                                         */
/*****************************************************************************/
/* Note: These styles alter the default QtWidgets (no subclasses here)       */
QWidget {
  border-radius: 0px;
  border-width: 0px;
  color: #000;
  font: 300 normal 12px "Ubuntu";

  margin: 0px;
  padding: 0px;
  selection-background-color: $color-primary;
  selection-color: white;

  &:focus {
    outline: None;
    text-decoration: underline;
  }

  &:disabled {
    color: #999;
  }
}

/*****************************************************************************/
/* Line edits and text boxes                                                 */
/*                                                                           */
/* http://doc.qt.io/qt-4.8/stylesheet-examples.html#customizing-qlineedit    */
/*****************************************************************************/
QLineEdit,
QTextArea {
  /* This affects all textboxes, search boxes and form boxes. Must be adjusted
   * to match the height of the buttons.
   */
  // weight, style, size, family
  font: 300 normal 12px "Ubuntu";
  border: 1px solid grey;
  min-height: 14px;
  max-height: 14px;
  padding: 4px 6px;

  &:focus,
  &:hover {
    border: 1px solid $color-primary;
  }
}

/*****************************************************************************/
/* Scroll bar */
/*****************************************************************************/
$scroll-bar-color:            #bbb;
$scroll-bar-background-color: #ddd;
$scroll-bar-hover-color:      #ccc;
$scroll-bar-size:             16;     // Width / Height of bar
$scroll-bar-height:           20;     // Check if it is really needed

QScrollBar {
  /* http://doc.qt.io/qt-4.8/stylesheet-examples.html#customizing-qscrollbar */
  &:add-page:vertical,
  &:sub-page:vertical {
    background: none;
  }

  &:vertical {
    background: $scroll-bar-background-color;
    margin: 20px 0 20px 0;
    width: $scroll-bar-size;
  }

  &:handle {
    background-color: $scroll-bar-color;
    margin: 1px 0;
    min-height: 8px;
    max-height: 200px;

    &:hover{
      background-color: $scroll-bar-hover-color;
    }
  }

  /* Top section */
  &:up-arrow:vertical {
    image: url('$IMAGE_PATH/icons/sort-asc.svg');
    border: 0px solid grey;
    width: $scroll-bar-size;
    height: $scroll-bar-size;
  }

  &:sub-line {
    background-color: $scroll-bar-color;
    height: $scroll-bar-height;
    subcontrol-position: top;
    subcontrol-origin: margin;

    &:hover{
      background-color: $scroll-bar-hover-color;
    }
  }

  /* Bottom section */
  &:down-arrow:vertical {
    image: url('$IMAGE_PATH/icons/sort-desc.svg');
    border: 0px solid grey;
    width: $scroll-bar-size;
    height: $scroll-bar-size;
  }

  &:add-line {
    background-color: $scroll-bar-color;
    height: $scroll-bar-height;
    subcontrol-position: bottom;
    subcontrol-origin: margin;

    &:hover{
      background-color: $scroll-bar-hover-color;
    }
  }
}

/*****************************************************************************/
/* Application Menu Bar (File, Help etc..., needed for linux and windows)    */
/*                                                                           */
/* http://doc.qt.io/qt-4.8/stylesheet-examples.html#customizing-qmenubar     */
/*****************************************************************************/
QMenuBar {
  background: #ffffff;

  &:item {
    background: transparent;
    border-radius: 0px;
    padding: 4px 8px;
    spacing: 3px;

    &:selected { /* when selected using mouse or keyboard */
      background: $color-primary;
      color: white;
    }

    &:pressed {
      background: #cccccc;
      color: black;
    }
  }
}

/*****************************************************************************/
/* Contextual menus (Display of menu bar or right click contextual menus)    */
/*                                                                           */
/* http://doc.qt.io/qt-4.8/stylesheet-examples.html#customizing-qmenu        */
/*****************************************************************************/
QMenu {
  background-color: white;
  border: 1px solid grey;  /* Reserve space for selection border */

  &:separator {
    background: gray;
    width: 1px;   /* When vertical */
    height: 1px;  /* When horizontal */
  }

  &:indicator:checked {
    image: url('$IMAGE_PATH/icons/check-active.svg');
  }

  &:item {
    border: 1px solid transparent;  /* Reserve space for selection border */
    padding: 8px 24px;

    &:selected {
      background: $color-grayscale-1;
      color: $color-primary;
    }

    &:disabled {
      background: transparent;
      color: #ccc;
    }
  }
}

/*****************************************************************************/
/* Checkboxes                                                                */
/*                                                                           */
/* http://doc.qt.io/qt-4.8/stylesheet-examples.html#customizing-qcheckbox    */
/*****************************************************************************/
QCheckBox {

  outline: none;  /* Remove the focus rectangle in ubuntu and osx */
  padding-right: 6px;

  &:indicator {
    height: 16px;
    width: 16px;

    &:disabled:checked ,
    &:disabled:unchecked{
      image: url('$IMAGE_PATH/icons/check-box-disabled.svg');
      color: #ccc;
    }

    &:unchecked {
      image: url('$IMAGE_PATH/icons/check-box-blank.svg');

      &:hover,
      &:focus  {
        image: url('$IMAGE_PATH/icons/check-box-active.svg');
      }

      &:pressed {
        image: url('$IMAGE_PATH/icons/check-box-blank.svg');
      }
    }

    &:checked {
      image: url('$IMAGE_PATH/icons/check-box-checked.svg');

      &:focus,
      &:checked:hover {
        image: url('$IMAGE_PATH/icons/check-box-checked-active.svg');
      }
    }
  }
}

/*****************************************************************************/
/* QComboBox / Dropdown                                                      */
/*                                                                           */
/* http://doc.qt.io/qt-4.8/stylesheet-examples.html#customizing-qcombobox    */
/*****************************************************************************/
QComboBox {
  border: 1px solid grey;
  min-width: 5em;

  &:focus,
  &:hover {
    border: 1px solid #62b849;
  }

  /* Styles every list item within the dropdown list */
  &:indicator {
    image: none;  /* This will appear in all lines */
  }

  &:down-arrow {
    image: url('$IMAGE_PATH/icons/sort-desc.svg');
    @include width(16px);
  }

  /* "Trigger" */
  &:drop-down {
    border-left-width: 1px;
    border-left-color: darkgray;
    border-left-style: solid; /* just a single line */
    border-top-right-radius: 0px; /* same radius as the QComboBox */
    border-bottom-right-radius: 0px;
    subcontrol-origin: padding;
    subcontrol-position: top right;
    width: 15px;
  }

  /* "Closed" state */
  &:on:drop-down {
    /* Height can be changed here */
    border-radius: 0;
    height: 22px;
    min-height: 22px;
    min-width: 8em;
    padding-top: 0;
    padding-left: 24px;
  }

  &:item {
    @include height(16px);
    @include width(16px);
    border: 1px solid transparent;
    //padding-left: 24px;

    /* The presently selected item */
    &:checked {
      color: #35a615;
      background-image: url('$IMAGE_PATH/icons/checked.svg');
    }

    /* Hover states for all list items */
    &:selected {
      color: #35a615;
      background: #f2f2f2;
    }
  }

  /* This is the actual dropdown box */
  QAbstractItemView {
    background: white;
    border: 1px solid grey;
    selection-background-color: #f2f2f2;
    selection-color: white;
  }
}

/*****************************************************************************/
/* Frame / Containers                                                        */
/*                                                                           */
/* http://doc.qt.io/qt-4.8/stylesheet-examples.html#customizing-qframe       */
/*****************************************************************************/
FrameBody {
  /* This is the main body container (Side bar plus content) */
  background: white;

  //border: 2px solid blue;
}

FrameTabBody {
  /* This is the container for the content of the tabs */
  border: 1px solid #ddd;
  margin: 16px;  // Whitespace

  //border: 2px solid green;
}

FrameTabHeader {
  border-bottom: 1px solid #ddd;
  padding: 12px;
  @include height(24px);  /* Needed to guarantee a size on OSX and linux */

  //border: 2px solid red;

  QLabel {
    font-size: 16px;
  }
}

FrameTabFooter {  // Upper color part of content cards
  border: 1px solid transparent;
  border-top: 1px solid #ddd;
  min-height: 20px;
  padding: 6px;

  //border: 2px solid red;
}

FrameTabContent {
}

/*****************************************************************************/
/* Dialogs (Preferences, quit, logger, update etc...)                        */
/*                                                                           */
/* http://doc.qt.io/qt-4.8/stylesheet-examples.html#customizing-qframe       */
/*                                                                           */
/* /anaconda_navigator/widgets/dialogs/                                      */
/*****************************************************************************/
$SHADOW_BLUR_RADIUS: 50;

FrameDialog {
    /* Frame container for TitleBar and Body */
    border: 1px solid $color-gray-2;
    margin: 10px;
}

FrameDialogTitleBar {
  background: $color-gray-1;
  border-bottom: 1px solid $color-gray-2;
  padding: 0px 12px;
  @include height(32px);

  QWidget {
    color: white;
  }
}

FrameDialogBody {
    background: white;
    padding: 16px;
}


/*****************************************************************************/
/* Tooltips                                                                  */
/*                                                                           */
/*                                                                           */
/*****************************************************************************/
QToolTip {
    font: 300 normal 11px "Ubuntu";
    border: 1px solid $color-gray-2;
    background: white;
    padding: 8px;
    opacity: 250;
    color: black;
}
/*****************************************************************************/
/* Spacers                                                                   */
/*                                                                           */
/*                                                                           */
/*****************************************************************************/
SpacerVertical {
  /* Uses a QLabel to allow tweaking spacing between buttons in forms etc.   */
  @include height(12px);
  //background: red;
}

SpacerHorizontal {
  /* Uses a QLabel to allow tweaking spacing between buttons in forms etc.   */
  @include width(12px);

  //background: red;
}


/*****************************************************************************/
/* Tables                                                                    */
/*                                                                           */
/* http://doc.qt.io/qt-4.8/stylesheet-examples.html#customizing-qtableview   */
/*****************************************************************************/
QHeaderView {

  &:down-arrow {
    image: url('$IMAGE_PATH/icons/sort-asc.svg');
    @include width(16px);
    @include height(16px);
  }

  &:up-arrow {
    image: url('$IMAGE_PATH/icons/sort-desc.svg');
    @include width(16px);
    @include height(16px);
  }

  &:section {
    /* Header of tables */
    border: 1px solid #eee;
    background-color: #eee;
    color: black;
    padding: 6px;
    spacing: 10px;

    &:hover,
    &:focus {
      background-color: #ddd;
      border: 0px solid black;
    }
  }
}

QTableView {
  alternate-background-color: #efefef;
  background-color: white;
}

/*****************************************************************************/
/* ProgressBar                                                               */
/*                                                                           */
/* http://doc.qt.io/qt-4.8/stylesheet-examples.html#customizing-qprogressbar */
/*****************************************************************************/
QProgressBar {
  border: 0px solid $color-grayscale-1;
  border-radius: 4px;
  background-color: $color-grayscale-1;
  padding: 1px;
  @include height(20px);

  &:chunk {
    background-color: $color-secondary;
    width: 10px;
    margin: 0px;
  }
}

/*****************************************************************************/
/* Buttons */
/*                                                                           */
/*                                                                           */
/*                                                                           */
/*****************************************************************************/
ButtonBase, ButtonToolBase {
    color: black;
    border: 1px solid transparent;
    border-bottom: 2px solid transparent;
    padding: 0px 10px;
    margin: 0px;
    outline: none;  /* Remove the focus rect in ubuntu and macos */
}

ButtonBase:focus {
    text-decoration: underline;
}

ButtonToolNormal,
ButtonToggleCollapse {
    border: 1px solid transparent;
    border-bottom: 2px solid #aaa;
    background: #ddd;
    color: black;
    qproperty-iconSize: 14px;

}

ButtonToolNormal:hover,
ButtonToolNormal:focus,
ButtonToggleCollapse:hover,
ButtonToggleCollapse:focus {
    background: #eeeeee;
}

ButtonToggleCollapse {
  border: 1px solid #ddd;
  border-top-width: 0px;
  border-bottom-width: 0px;
  @include width(24px);
  qproperty-iconSize: 24px;

  &[checked="false"] {
    qproperty-icon: url('$IMAGE_PATH/icons/arrow-left.svg');
  }

  &[checked="true"] {
    qproperty-icon: url('$IMAGE_PATH/icons/arrow-right.svg');
  }
}

ButtonNormal {
  @include button-filled($color-grayscale-1, black);
}

ButtonPrimary {
  @include button-filled($color-primary, white);
}

ButtonDanger {
  @include button-filled($color-danger, white);
}

ButtonLink {
  background: none;
  border: none;
  color: $color-primary;
  padding: 1px;
  text-align: left;

  &:focus {
    text-decoration: underline;
  }

  &:hover,
  &:focus {
    color: $color-primary-alt-1;
  }
}

ButtonLabel {
   /* Button styled like a label, to be used in conjunction with links */

  &:disabled {
    color: black;
  }
}

/*****************************************************************************/
/* Header                                                                    */
/*                                                                           */
/*****************************************************************************/
FrameHeader {
  /* This is the top (anaconda logo, login buttons) container */
  background: $color-gray-1;
  min-height: 48px;
  padding: 4px 25px;

  //border: 2px solid red;

  LabelBeta {
    padding: 12px 5px 0 5px;
    font: 100 normal 10px "Ubuntu";
    color: white;
    @include height(1em);
  }

  ButtonLabel {
    &:disabled {
      color: white;
    }
  }

  ButtonHeaderUpdate {
    border: 1px dashed transparent;
    padding: 4px;
    qproperty-iconSize: 24px; 
    qproperty-icon: url('$IMAGE_PATH/icons/info-green.svg');

    &[hovered='true'],
    &[focused='true'] {
      qproperty-icon: url('$IMAGE_PATH/icons/info-green-active.svg');
    }

    &[focused='true'] {
      border: 1px dashed #ccc;
    }

    &[pressed='true'] {
      qproperty-icon: url('$IMAGE_PATH/icons/info.svg');
    }
  }
}


/*****************************************************************************/
/* Sidebar                                                                   */
/*                                                                           */
/*****************************************************************************/
FrameTabBar {
  /* This is the side navigation bar container */
  background: $color-grayscale-1;
  border-right: 1px solid $color-grayscale-1;
  margin:0px;
  @include width(200px);

  //border: 2px solid yellow;

  FrameTabBarBottom {
    padding: 20px;
    padding-bottom: 42px;

    //border: 2px solid blue;

    FrameTabBarLink {
      padding: 20 0px;

      //border: 2px solid red;

      ButtonLink {
        text-align: center;
        color: #000;
        padding: 8 12px;
        margin: 6 0px;             // Space between buttons
        background: white;

        &:hover {
          color: $color-primary;
        }
      }

     }

    FrameTabBarSocial {
      padding: 0px;

      //border: 2px solid green;

      ButtonLink {
        background: transparent;
        border: 1px dashed transparent;
        font: 100 normal 1px "Ubuntu";
        padding: 4px;
        padding-left: 6px;
        padding-right: 0px;
        margin: 0px;
        qproperty-iconSize: 24px;
        margin: 0px;
        //min-width: 20px;

        //border: 1px solid transparent;

        &:focus,
        &:hover {
          // background: white;
          border: 1px dashed grey;
          // color: white;
        }

        &#twitter {
          qproperty-icon: url('$IMAGE_PATH/icons/twitter.svg');
          &[hovered='true'] {
            qproperty-icon: url('$IMAGE_PATH/icons/twitter-active.svg');
          }
        }

        &#github {
          qproperty-icon: url('$IMAGE_PATH/icons/github.svg');
          &[hovered='true'] {
            qproperty-icon: url('$IMAGE_PATH/icons/github-active.svg');
          }
        }

        &#youtube {
          qproperty-icon: url('$IMAGE_PATH/icons/youtube.svg');
          &[hovered='true'] {
            qproperty-icon: url('$IMAGE_PATH/icons/youtube-active.svg');
          }
        }
      }
    }
  }
}

ButtonTab {
  background: $color-grayscale-1;
  border-bottom: 1px solid $color-grayscale-1;
  font: 300 normal 14px "Ubuntu";
  min-height: 32px;
  padding: 10 24px;
  qproperty-iconSize: 24px;

  &[checked="true"] {
    background: $color-grayscale-2;
    color: $color-primary;
  }

  &[checked="false"] {

    &:focus,
    &:hover {
       background: #f1f1f1;
    }
  }

  &:focus {
    text-decoration: underline;
  }

  /* Specific icons per button */
  &#home {
    &[checked="true"] {
      qproperty-icon: url('$IMAGE_PATH/icons/home-active.svg');
    }

    &[checked="false"] {
     qproperty-icon: url('$IMAGE_PATH/icons/home.svg');
    }
  }

  &#environments{
    &[checked="true"] {
       qproperty-icon: url('$IMAGE_PATH/icons/env-active.svg');
     }

    &[checked="false"] {
      qproperty-icon: url('$IMAGE_PATH/icons/env.svg');
    }
  }

  &#community {
    &[checked="true"] {
      qproperty-icon: url('$IMAGE_PATH/icons/community-active.svg');
    }

    &[checked="false"] {
      qproperty-icon: url('$IMAGE_PATH/icons/community.svg');
    }
  }

  &#learning {
    &[checked="true"] {
      qproperty-icon: url('$IMAGE_PATH/icons/learning-active.svg');
    }

    &[checked="false"] {
      qproperty-icon: url('$IMAGE_PATH/icons/learning.svg');
    }
  }
}

LabelTabHeader {
  margin: 0px;
  color: #666;
  padding: 6px;

  //border: 1px solid green;
}

ButtonSearch {
  margin-right: 6px;
  image: url('$IMAGE_PATH/icons/close.svg');
  @include width(20px);

  &:disabled {
    image: url('$IMAGE_PATH/icons/search.svg');
  }

  &:focus,
  &:hover{
    image: url('$IMAGE_PATH/icons/close.svg');
  }
}

/*****************************************************************************/
/* Application list (Home Tab)                                               */
/*                                                                           */
/*                                                                           */
/*****************************************************************************/
$WIDGET_APPLICATION_TOTAL_WIDTH: 260;   // Used by code. DO NOT CHANGE NAME!
$WIDGET_APPLICATION_TOTAL_HEIGHT: 280;  // Used by code. DO NOT CHANGE NAME!
$WIDGET_APPLICATION_PADDING: 5;            // Used by code. DO NOT CHANGE NAME!
$WIDGET_APPLICATION_MARGIN: 5;              // Used by code. DO NOT CHANGE NAME!

$widget-app-image-height: 64;
$widget-app-border-width: 1;
$widget-app-width: $WIDGET_APPLICATION_TOTAL_WIDTH - 2*$WIDGET_APPLICATION_PADDING - 2*$WIDGET_APPLICATION_MARGIN;
$widget-app-height: $WIDGET_APPLICATION_TOTAL_HEIGHT - 2*$WIDGET_APPLICATION_PADDING - 2*$WIDGET_APPLICATION_MARGIN;

// button mixin
@mixin button-app($color) {
  background: white;
  border: 1px solid $color;
  color: $color;
  padding: 4 10px;

  &[focused='false'],
  &[hovered='false'] {
    background-color: white;
  }

  &[focused='true'],
  &[hovered='true'] {
    color: white;
    background-color: $color;
  }

  &[disabled='true'] {
    background-color: #ddd;
    color: #aaa;
  }
}

ListWidgetApplication {
    background-color: #eee;
    padding: 5px;
    outline: none;  // Needed on OSX to avoid the blue focus rectangle
}

WidgetApplication {
  background: white;
  border: 1px solid #ccc;
  padding: $WIDGET_APPLICATION_PADDING;
  margin:  $WIDGET_APPLICATION_MARGIN;
  @include width($widget-app-width);
  //@include height($widget-app-height);
  //border: 2px solid green;
}

LabelApplicationIcon {
    margin: 0px;
    padding: 0px;
    @include height($widget-app-image-height);
    //border: 2px solid green;
}

LabelApplicationName {
    padding: 5px;
    font: 100 normal 14px "Ubuntu";
    @include height(1em);
    //border: 2px solid green;
}

LabelApplicationSpinner {
  padding: 0px;
  margin: 0px;
  @include width(16px);
  @include height(16px);
}

ButtonApplicationVersion {
  @include height(1em);
  font: 300 normal 11px "Ubuntu";
  padding: 0px;
  margin: 0px;
  qproperty-icon: none;
  qproperty-iconSize: 16px;

  //border: 2px solid green;

  &[pressed='true']{
    qproperty-icon: url('$IMAGE_PATH/icons/update-app-active.svg');
    color: $color-secondary;
  }
}

LabelApplicationDescription {
  font: 100 normal 12px "Ubuntu";
  @include height(5em);
  padding: 0px;

  //border: 2px solid green;
}

ButtonApplicationInstall {
  @include button-app($color-primary);
  margin: 5px;
}

ButtonApplicationLaunch {
  @include button-app($color-secondary);
  margin: 5px;
}

/* "Settings" cog Buttons */
ButtonApplicationOptions {
  @include width(16px);
  @include height(16px);
  background: none;
  border: 1px solid transparent;
  image: url('$IMAGE_PATH/icons/settings.svg');
  padding: 5px;

  &:hover,
  &:focus {
    background: white;
    border: 1px dashed grey;
  }
}


/*****************************************************************************/
/* Environment list (Environment Tab)                                        */
/*                                                                           */
/*                                                                           */
/*****************************************************************************/
$WIDGET_ENVIRONMENT_TOTAL_WIDTH: 170;   // Used by code. DO NOT CHANGE NAME!
$WIDGET_ENVIRONMENT_TOTAL_HEIGHT: 42;   // Used by code. DO NOT CHANGE NAME!

FrameEnvironmentsList {
    max-width: 280px;
    min-width: 280px;
}

ListWidgetEnvironment {
    background-color: white;
    outline: 0;  // Needed on OSX to remove blue focus rectangle
}

WidgetEnvironment {
  background: $color-grayscale-2;
  border-bottom: 1px solid #ccc;
  outline: none;
  padding-left: 5px;
  border-left: 4px solid transparent;

  &[hovered='true'],
  &[focused='true'] {
    border-left: 4px solid #43b02a;
  }

  &[pressed='true'] {
    border-left: 4px solid #007041;
    color: #007041;
  }

  ButtonEnvironmentName {
    @include width(160px);
    color: black;
    padding-bottom: 4px;  // needed to se the underline
    text-align: left;

    &[pressed='true'] {
      color: #007041;
    }

    &[hovered='true'] {
      color: #43b02a;
    }

    &:focus {
      color: green;
      //text-decoration: underline;
    }

  }

  LabelEnvironmentIcon {
    padding: 4px;
    @include width(20px);
  }

  ButtonEnvironmentOptions {
    border: 1px dashed transparent;
    padding: 5px;
    qproperty-icon: url('$IMAGE_PATH/icons/play-arrow-active.svg');
    qproperty-iconSize: 24px;
    &:hover,
    &:focus {
       border: 1px dashed #007041;
    }
  }
}


ButtonToolNormal {
  background: $color-grayscale-2;
  padding: 6px;
  qproperty-iconSize: 24px;
  @include height(48px);
  min-width: 56 px;
  border: 1px solid transparent;
  border-right: 1px solid #ddd;
  border-top: 1px solid #ddd;

  &:hover {
    background: $color-grayscale-1;
  }

  &#create {
    qproperty-icon: url('$IMAGE_PATH/icons/env-add.svg');
    &[hovered='true'][enabled='true'],
    &[focused='true'][enabled='true'] {
      color: $color-primary;
      qproperty-icon: url('$IMAGE_PATH/icons/env-add-active.svg');
    }
  }

  &#clone {
    qproperty-icon: url('$IMAGE_PATH/icons/env-clone.svg');
    &[hovered='true'][enabled='true'],
    &[focused='true'][enabled='true'] {
      color: $color-primary;
      qproperty-icon: url('$IMAGE_PATH/icons/env-clone-active.svg');
    }
  }

  &#import {
    qproperty-icon: url('$IMAGE_PATH/icons/env-import.svg');
    &[hovered='true'][enabled='true'],
    &[focused='true'][enabled='true'] {
      color: $color-primary;
      qproperty-icon: url('$IMAGE_PATH/icons/env-import-active.svg');
    }
  }

  &#remove {
    border-right: 1px solid transparent;
    qproperty-icon: url('$IMAGE_PATH/icons/delete.svg');
    &[hovered='true'][enabled='true'],
    &[focused='true'][enabled='true'] {
      color: $color-danger;
      qproperty-icon: url('$IMAGE_PATH/icons/delete-active.svg');
    }
  }
}



/*****************************************************************************/
/* Environment dialogs (Environment Tab)                                        */
/*                                                                           */
/*                                                                           */
/*****************************************************************************/
ButtonNormal#import {
  qproperty-icon: url('$IMAGE_PATH/icons/open.svg');
  qproperty-iconSize: 24px;

  &[focused='true'] {
    qproperty-icon: url('$IMAGE_PATH/icons/open-active.svg');
  }
}


/*****************************************************************************/
/* Content cards (Community and learning cards)                              */
/*                                                                           */
/*                                                                           */
/*****************************************************************************/
$color-documentation: #007041;
$color-video: #006298;
$color-webinar: #F3D03E;
$color-training: #615E9B;
$color-event: #006298;
$color-forum: #615E9B;
$color-social: #007041;

/* Mixin for building colored toggle buttons */
@mixin content-toggle($color-checked) {
  &[checked='true'] {
    background: $color-checked;
    color: white;

    &:hover,
    &:focus {
      background: lighten($color-checked, 10%);
    }
  }

  &[checked='false'] {
    background: white;
    color: black;

    &:hover,
    &:focus {
      background: darken(white, 10%);
    }
  }
}

ButtonToggle {
  @include button();
  border: 1px solid #aaa;

  &#documentation {
    @include content-toggle($color-documentation);
  }

  &#training {
    @include content-toggle($color-training);
  }

  &#video {
    @include content-toggle($color-video);
  }

  &#webinar {
    @include content-toggle($color-webinar);
  }

  &#event {
    @include content-toggle($color-event);
  }

  &#forum {
    @include content-toggle($color-forum);
  }

  &#social {
    @include content-toggle($color-social);
  }
}


/* This widget has an odd behavior with css, hence all the variables below   */

$WIDGET_CONTENT_TOTAL_WIDTH: 200;   // Used by code. DO NOT CHANGE NAME!
$WIDGET_CONTENT_TOTAL_HEIGHT: 220;  // Used by code. DO NOT CHANGE NAME!
$WIDGET_CONTENT_PADDING: 0;         // Used by code. DO NOT CHANGE NAME!
$WIDGET_CONTENT_MARGIN: 5;          // Used by code. DO NOT CHANGE NAME!

$widget-content-image-height: 105;
$widget-content-border-width: 1;
$widget-content-width: $WIDGET_CONTENT_TOTAL_WIDTH - 2*$WIDGET_CONTENT_PADDING - 2*$WIDGET_CONTENT_MARGIN;
$widget-content-height: $WIDGET_CONTENT_TOTAL_HEIGHT - 2*$WIDGET_CONTENT_PADDING - 2*$WIDGET_CONTENT_MARGIN;

ListWidgetContent {
  background: #eee;
  outline: none;
  padding: $WIDGET_CONTENT_PADDING;
}

FrameContent {
  background: white;
  margin: $WIDGET_CONTENT_MARGIN;
  padding: $WIDGET_CONTENT_PADDING;
  padding-bottom: 0px;
  @include width($widget-content-width);

  //border: 2px solid green;
}


@mixin button-content-color($color) {
    background: $color;
    &:focus,
    &:hover {
      background: darken($color, 10);
    }

    &[active='true'] {
      background: darken($color, 10);
    }
}

ButtonContentText {
  color: white;
  font-size: 13px;
  margin: 0px;
  padding: 0px;
  @include height(2em);
  @include width($widget-content-width);

  &#documentation {
    @include button-content-color($color-documentation);
  }

  &#training {
    @include button-content-color($color-training);
  }

  &#video {
    @include button-content-color($color-video);
  }

  &#webinar {
    @include button-content-color($color-webinar);
    background: $color-webinar;
  }

  // Community
  &#event {
    @include button-content-color($color-event);
  }

  &#forum {
    @include button-content-color($color-forum);
  }

  &#social {
    @include button-content-color($color-social);
  }
}

FrameTabHeader,
FrameContentHeader {
  // Learning
  &#documentation {
    background: $color-documentation;
  }

  &#training {
    background: $color-training;
  }

  &#video {
    background: $color-video;
  }

  &#webinar {
    background: $color-webinar;
  }

  // Community
  &#event {
    background: $color-event;
  }

  &#forum {
    background: $color-forum;
  }

  &#social {
    background: $color-social;
  }
}

FrameContentHeader {
   @include height(7px);
   border: $widget-content-border-width solid #ccc;
   border-bottom: 1px solid transparent;
}

FrameContentBody {
  padding:0px;
  margin: 0px;
  border: $widget-content-border-width solid #ccc;
}

LabelContentIcon {
  border: 0px solid #ccc;
  border-bottom: $widget-content-border-width solid #ccc;
  @include height($widget-content-image-height);
  @include width($widget-content-width - 2*$widget-content-border-width);

  //border: 2px solid blue;
}

LabelContentTitle {
  padding: 5px;
  margin: 0px;
  @include height(4.5em);
  
  &[active='true'] {
    color: $color-primary;
  }
}

ButtonContentInformation,
LabelEmpty {
  min-height: 16x;
  padding-bottom: 2px;
  font-size: 11px;

  //border: 2px solid red;
}


/* New styles to make merging easy */
/*****************************************************************************/
/* Channel dialog                                                            */
/*                                                                           */
/*                                                                           */
/*****************************************************************************/
$WIDGET_CHANNEL_DIALOG_WIDTH: 450;  // Used by code. DO NOT CHANGE NAME!
$WIDGET_CHANNEL_TOTAL_WIDTH: 350;   // Used by code. DO NOT CHANGE NAME!
$WIDGET_CHANNEL_TOTAL_HEIGHT: 55;   // Used by code. DO NOT CHANGE NAME!
$WIDGET_CHANNEL_PADDING: 10;        // Used by code. DO NOT CHANGE NAME!

$widget-channel-width: $WIDGET_CHANNEL_TOTAL_WIDTH - 2*$WIDGET_CHANNEL_PADDING -1;
$widget-channel-height: $WIDGET_CHANNEL_TOTAL_HEIGHT - 2*$WIDGET_CHANNEL_PADDING - 1;

ListWidgetChannels {
  background: white;
  border: 1px solid #ccc;
  outline: none;
  padding: 0px;
}

FrameChannels {
  background: #eee;
  border-bottom: 1px solid #ddd;
  margin: 0px;
  padding: $WIDGET_CHANNEL_PADDING;
  //@include width($widget-channel-width);
  @include height($widget-channel-height);

  //border: 2px solid green;

  QLineEdit {
      //background: #eee;
      border: 1px solid transparent;
      @include width(250px);

      &:read-only {
        background: #eee;
      }

      &:disabled {
        background: #eee;
        color: black;
      }
  }

  QLabel {
    padding: 6px;
    @include width(24px);

    image: url('$IMAGE_PATH/icons/warning-active.svg');
    &:disabled {
      image: none;
    }
  }

  ButtonDanger {
    background: transparent;
    padding: 5px;
    qproperty-icon: url('$IMAGE_PATH/icons/delete.svg');
    qproperty-iconSize: 24px;

    &[focused='true'],
    &:focus {
      background: transparent;
      border: 1px dashed $color-danger;
      qproperty-icon: url('$IMAGE_PATH/icons/delete-active.svg');
    }

    &:hover,
    &[hovered='true'] {
      background: transparent;
      qproperty-icon: url('$IMAGE_PATH/icons/delete-active.svg');
    }
  }
}

/*****************************************************************************/
/* Logger                                                                    */
/*                                                                           */
/*                                                                           */
/*****************************************************************************/
ListWidgetLog {
  background: white;
  border: 1px solid #ccc;
  outline: none;
  padding: 5px;
  @include width(660);

  &:item {
    padding: 5px;
    border: 1px solid transparent;
    &:selected {
      color: $color-primary;
      border: 1px solid $color-primary;
    }
  }
}
