@include export-module('co-statusbar-layout') {
  .co-statusbar-wrapper {
    display: flex;
    flex-direction: column;;
    position: relative;
    font-family: $statusbar-font-family;
    font-size:$statusbar-font-size;
    height: $statusbar-height;
    min-width: $statusbar-min-width;
    max-width: $statusbar-max-width;

    cursor: pointer;

    .statuses {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
  }
  .co-statusbar-popup-wrapper {
    position: fixed;
    font-family: $statusbar-font-family;
    font-size:$statusbar-font-size;
    min-height: $statusbar-popup-min-height;
    min-width: $statusbar-popup-min-width;
    max-width: $statusbar-popup-max-width;
    padding: $statusbar-popup-padding;
    border: $statusbar-popup-border;
    border-radius: $statusbar-popup-border-radius;
    z-index: $statusbar-popup-z-index;
    .status-descriptions {
      display: flex;
      flex-direction: column;
      .status-description {
        display: flex;
        flex-direction: row;
        align-items: center;
        .statusbar-canvas-wrapper {
          position: relative;
        }
        .statusbar-inner-canvas-label {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%) scale(0.7);
          &:after {
            content: '%';
          }
          &:empty::after {
            content: '-';
          }
        }
        .statusbar-description {
          padding-left: $statusbar-status-description-padding-left;
        }
      }
    }
    .chart-canvas {
      width: 30px !important;
      height: 30px !important;
    }
  }
  .co-linear-gauge {
    &.focused-status {
      div {
        width: 18px;
        height: 18px;
        max-width: none;
      }
    }
  }
}