CartoDB/cartodb20

// Default styles for widgets
//
// Expected layout hierarchy:
//   CDB-Widget
//     CDB-Loader
//     CDB-Widget-error
//     CDB-Widget-body
//       CDB-Widget-header
//       CDB-Widget-content
//       CDB-Widget-footer
//
// --------------------------------------------------

.CDB-Widget {
  position: relative;
  box-sizing: border-box;
  width: $desktopLayout;
  margin-bottom: 2px;

  &.is-disabled {
    opacity: 0.24;
    pointer-events: none;

    // Needed to disable SVG interaction
    * {
      pointer-events: none;
    }
  }
}

.CDB-Widget-body {
  padding: ($sMargin-section - 4) 0;
}

.CDB-Widget .CDB-Loader {
  height: 1px;
}

.CDB-Widget--timeSeries {
  width: 100%; // override default width
  margin-bottom: 0;
  border-radius: $baseSize / 2;
}

.CDB-Widget-title {
  @include display-flex();
  @include justify-content(flex-start, start);
  @include align-items(center);
  position: relative;
  width: 100%;
}

.CDB-Widget-header,
.CDB-Widget-footer,
.CDB-Widget-content {
  margin-right: $sMargin-section;
  margin-left: $sMargin-section;
}

.CDB-Widget-content--histogram {
  margin-right: $sMargin-section - 4;
  margin-left: $sMargin-section - 4;

  .CDB-Widget-filter {
    margin-right: 4px;
    margin-left: 4px;
  }
}

.CDB-Widget-content {
  position: relative;
}

.CDB-Widget-content--noSidesMargin {
  margin-right: 0;
  margin-left: 0;

  .CDB-Widget-listItem--fake {
    margin-right: $sMargin-section;
    margin-left: $sMargin-section;
  }
}

.CDB-Widget-body.is-collapsed {
  height: 22px;

  .CDB-Widget-content,
  .CDB-Widget-info,
  .CDB-Widget-nav {
    display: none;
  }
}

.CDB-Widget-body.is-hidden {
  display: none;
}

.CDB-Widget-options {
  margin-right: -7px;
}

.CDB-Chart--histogram {
  margin-top: $baseSize * 3;

  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    transform: rotateZ(-0.001deg);
  }
}

.CDB-Widget-content--histogram,
.CDB-Widget-content--timeSeries,
.CDB-Widget-content--torqueTimeSeries, {
  -ms-touch-action: none;
  touch-action: none;
}

.CDB-Widget-loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  overflow: hidden;
}

@media (max-width: $sMedia-max-embed) {
  .CDB-Widget {
    width: $mobileLayout;
    min-width: $mobileLayout;
  }

  .CDB-Widget--timeSeries {
    width: 100%; // override default width
  }
}

@media (max-width: $sMedia-l) {
  .CDB-Widget {
    @include flex(0 0 auto);
    width: auto;
    min-width: 250px; // Enough for dropdown width
    margin: 0;
    padding: 0;
    border-left-width: 1px;
    border-left-style: solid;
  }

  .CDB-Widget .CDB-Loader {
    height: 2px;
  }

  .CDB-Widget-body {
    &.is-collapsed {
      height: 100%;

      .CDB-Widget-content,
      .CDB-Widget-info {
        display: block;
      }
    }

    .CDB-Dropdown-item:first-child {
      > .CDB-Dropdown-link {
        opacity: 0.24;
        pointer-events: none;
      }
    }
  }

  .CDB-Widget--timeSeries {
    height: auto;
    min-height: auto; // override default min-height
    max-height: auto;
    margin-bottom: 2px;
  }

  .CDB-Widget-timeSeriesTimeInfo {
    display: none;
  }

  .CDB-Widget-content.CDB-Widget-content--timeSeries {
    width: 100%;
  }

  .CDB-Widget-header,
  .CDB-Widget-footer,
  .CDB-Widget-content {
    margin-right: 12px;
    margin-left: 12px;
  }

  .CDB-Widget-content--noSidesMargin {
    margin-right: 0;
    margin-left: 0;
  }

  .CDB-Widget-content--histogram {
    display: flex;
    flex-direction: column;
    min-width: 232px;
  }

  .CDB-Widget-content--formula {
    min-width: 180px;
  }

  .CDB-Widget-title .CDB-Text {
    max-width: 190px;
    padding-right: 12px;
  }

  .CDB-Widget-canvasInner {
    flex-direction: row;
    border-radius: 0;
  }

  .CDB-Widget-list {
    max-width: 314px;
  }

  .CDB-Chart--histogram {
    margin-top: 12px;
  }
}