.m-widget {
  overflow     : hidden;
  margin-bottom: 20px;
  height       : 59px;

  .documentation {
    text-align: right;
    display: block;
    color: $darkblue;
    .label {
      font-weight: bold;
    }
    &:hover {
      color: $red;
    }
  }

  path {
    fill: $darkblue;
  }

  &.show {
    height  : auto;
    overflow: visible;

  }

  &__header {
    background-color: $lightblue;
    color           : $darkblue;

    padding         : 5px 10px;

    display         : flex;
    align-items     : center;

    cursor          : pointer;

    border-radius   : 5px;
    border          : 1px solid transparent;

    &:focus {
      border: 1px solid $red;

      h3 {
        color: $red;
      }
    }

    h3 {
      font-size     : 14px;
      font-weight   : 800;

      text-transform: uppercase;
      color         : $darkblue;
    }

    .m-widget.show & {
      border-radius   : 5px 5px 0 0;
      background-color: $darkblue;
      color           : $darkblue;
      a {
        color: $white;
        transition:none;
      }
      path {
        fill: $white;
      }

      h3 {
        color: $white;
      }
    }

  }

  &__body {
    background-color: $grey;
    padding         : 20px;
    border-radius   : 10px;
    height          : 0;

    .m-widget.show & {
      border-radius: 0 0 5px 5px;
      height       : auto;
    }
  }

  &__header-drag {
    flex        : 1;
    padding     : 10px 15px 10px 7px;

    border-right: 1px solid $mediumblue;

    cursor      : grab;

    svg {
      width : 20px;
      height: 10px;
    }

  }

  &__header-inner {
    flex       : 1 100%;
    margin-left: 15px;

  }

  &__header-options {
    display    : flex;
    align-items: center;

    height     : 40px;
  }
  &__header--doc {
    color: $darkblue;
    &:hover {
      color: red;
    }
  }
  &__header--delete {

    width  : 35px;
    height : 35px;

    padding: 10px;

    &:focus path,
    &:hover path {
      fill: $red;
    }

  }

  &__header--toggle {
    padding        : 0 15px;
    margin-left    : 10px;
    border-left    : 1px solid $mediumblue;
    height         : 100%;
    display        : flex;
    align-items    : center;
    justify-content: center;

    &:after {
      content      : '';

      display      : block;

      width        : 0;
      height       : 0;

      border-style : solid;
      border-width : 7px 7px 0 7px;
      border-color : $darkblue transparent transparent transparent;

      border-radius: 3px;

      transition   : transform .3s ease;

      .m-widget.show & {
        transform   : rotate(-180deg);
        border-color: $white transparent transparent transparent;
      }
    }

    &:hover:after,
    .m-searchlist--active &:after {
      transform: rotate(-180deg);
    }
  }
}

.m-widget[data-disable="yes"] {
  opacity: 0.5 !important;
  .m-widget__body {
    pointer-events: none;

  }
}

.in-widget-title {
  @include rem-size(14);
  color         : $mediumblue;
  text-transform: none;
  margin-left   : 20px;
  font-weight   : 600;
}