@import url("https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.css");
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
$open-sans: 'Open Sans', sans-serif;

/** normalize **/
$viewport-width: 240px;

html.deskpro-sidebar {
  height: inherit; // must be overwritten to allow for autoresize in xcomponent
  @extend .text;
  line-height: normal;
  color: $dp-greyscale-850;
  margin: 0;
  padding: 0;
}

/** globals **/
.deskpro-sidebar {

  body {
    height: inherit; // must be overwritten to allow for autoresize in xcomponent
    width: $viewport-width;
    min-width: $viewport-width;
    max-width: $viewport-width;

    font-family: $open-sans;
    @extend .text;
    line-height: normal;
    margin: 0;
    padding: 0;
  }

  .label {
    font-size: 10px;
    font-weight: 400;
    font-family: $open-sans;

    line-height: normal;
    color: $dp-greyscale-700;
  }

  .subheading {
    font-weight: 600;
    font-size: 12px;
    font-family: $open-sans;

    line-height: normal;

    color: $dp-greyscale-700;
  }

  .heading {
    font-weight: 600;
    font-size: 12px;
    font-family: $open-sans;

    line-height: normal;

    color: $dp-greyscale-850;
  }

  a { @extend .text; }

  p {  @extend .text; }

  .text
  {
    font-size: 12px;
    font-weight: 400;
    line-height: normal;

    color: $dp-greyscale-850;

    &.small
    {
      font-size: 10px;
      font-weight: 400;
    }
  }

  .ui.container {
    margin: 10px !important;
    @extend .text;
  }

  .app-body .ui.input input { font-family: $open-sans; }

  .app-body .ui.form .field { @extend .text; }

  .app-body .ui.form .field > label {  @extend .label;  }

  .app-body .ui.header { @extend .subheading; }

  //.ui.text.container has different font-family
}

/** app menu **/
.deskpro-sidebar .deskpro-app .app-menu {

  /* all menu items */
  &.ui.menu {
    font-size: inherit;
    min-height: initial;
  }

  .app-header {
    padding: 8px !important;
  }

  /** app option */
  .item.big {
    font-size: 14px;
  }

  /** app title **/
  .ui.header {
    font-size: 12px;
    font-weight: 600;
    line-height: normal;

    margin: 0;

    .content {
      padding-left: 8px;
    }

    .ui.icon {
      font-size: 16px;

      line-height: 16px;

      padding: 0;
      width: 16px;
      height: 16px;
    }

    .ui.icon > img {
      width: 16px;
      height: 16px;
    }
  }
}

/* app menu header text */
.deskpro-sidebar .deskpro-app .app-menu {

  .app-header .content {
    color: $dp-greyscale-850;
  }

  .app-option {
    color: $dp-greyscale-850;
  }

  /** app options icons */
  &.ui.menu .menu > .item {
    color: $dp-greyscale-450;
  }
}

/** body layout **/
.deskpro-sidebar .deskpro-app .app-body {

  &.ui.segment {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .ui.header {
    margin: 0;
    padding: 0;
  }

  .ui.header.dividing {
    margin: 0 0 6px;
    padding: 0 0 4px;
    border-bottom-color: $dp-greyscale-350;
  }

  .ui.segment {
    padding: 0;
  }

  .ui.button {
    padding: 6px;

    font-size: 13px;
    font-family: $open-sans;

    color: $dp-greyscale-850;

    &:hover {
      box-shadow: 0 0 0 1px $dp-sonic-primary inset !important;
    }

    &.primary {
      background-color: $dp-sonic-primary;
      color: white;
    }
  }

  .ui.form .field > label {
    padding: 0;
    margin: 0 0 6px;
  }

  .ui.form .field {
    margin-bottom: 12px;
  }

  .ui.form select, .ui.form textarea {
    font-size: 12px;
    font-weight: 400;
    padding: 7px;
  }

  .ui.form input:not([type]), .ui.form input[type="date"], .ui.form input[type="datetime-local"], .ui.form input[type="email"], .ui.form input[type="number"], .ui.form input[type="password"], .ui.form input[type="search"], .ui.form input[type="tel"], .ui.form input[type="time"], .ui.form input[type="text"], .ui.form input[type="url"] {
    font-size: 12px;
    font-weight: 400;
    padding: 7px;
  }

  /* layout section divider */
  .ui.divider:not(.horizontal) {
    margin: 0 0 0.5rem;

  }
}

/** body colors **/
.deskpro-sidebar .deskpro-app .app-body {


  .ui.form select,
  .ui.form input,
  .ui.form textarea
  {
    color: $dp-greyscale-850;
  }

  .ui.form select:focus,
  .ui.form input:focus,
  .ui.form textarea:focus
  {
    border-color: $dp-sonic-primary;
  }

  .ui.form select:hover,
  .ui.form input:hover,
  .ui.form textarea:hover
  {
    border-color: $dp-sonic-primary;
  }

}