@import '../../styles/app';

.title {
  margin-top: 0;
  color: $widget-title-color;
  padding-right: 80px; // Make room for widget controls

  @include clearfix();
}

.widget {
  display: block;
  position: relative;
  margin-bottom: $grid-gutter-width;
  padding: $widget-padding-vertical $widget-padding-horizontal;
  background: var(--widget-bg);
  border-radius: $widget-border-radius;
  box-shadow: $widget-shadow;

  &.loading {
    min-height: 150px;
  }

  [control='collapse'] {
    display: unset;
  }

  [control='expand'] {
    display: none;
  }

  [control='fullscreen'] {
    display: unset;
  }

  [control='restore'] {
    display: none;
  }

  &.collapsed {
    min-height: unset;

    [control='collapse'] {
      display: none;
    }

    [control='expand'] {
      display: unset;
    }
  }

  &.fullscreened {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    z-index: 10000;

    border-radius: 0;
    background: $default-bg;

    [control='fullscreen'] {
      display: none;
    }

    [control='restore'] {
      display: unset;
    }
  }

  > header {
    margin: (-$widget-padding-vertical) (-$widget-padding-horizontal);
    padding: $widget-padding-vertical $widget-padding-horizontal;

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin: 0;
    }
  }

  .loader {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    .spinner {
      position: absolute;
      top: 50%;
      width: 100%; //ie fix
      margin-top: -10px;
      font-size: 20px;
      text-align: center;
    }
  }

  .widget-body.p-0 {
    margin: $widget-padding-vertical (-$widget-padding-horizontal) (-$widget-padding-vertical);

    + footer {
      margin-top: $widget-padding-vertical;
    }
  }

  &.bg-transparent {
    box-shadow: none;
  }
}

.widgetBody {
  @include clearfix();

  > footer {
    margin: $spacer/2 (-$widget-padding-horizontal) (-$widget-padding-vertical);
    padding: $widget-padding-vertical $widget-padding-horizontal;
    border-bottom-left-radius: $widget-border-radius;
    border-bottom-right-radius: $widget-border-radius;
  }
}

.widgetControls + .widgetBody {
  margin-top: $widget-padding-vertical;
}

.widget > .widgetControls,
.widget > .widget-controls {
  position: absolute !important;
  z-index: 10;
  top: 14px;
  right: 14px;
  padding: 0;
  font-size: $font-size-sm;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;

  a,
  span:not(.text-gray-light) {
    display: inline-flex;
    padding: 1px 4px;
    border-radius: 4px;
    color: $widget-title-color;
    line-height: 1;

    @include transition(color 0.15s ease-in-out);

    &:hover {
      color: rgba($widget-title-color, 0.5);
      text-decoration: none;
    }
  }
}

.widget-image {
  position: relative;
  overflow: hidden;
  margin: (-$widget-padding-vertical) (-$widget-padding-horizontal);
  border-radius: $border-radius;

  > img {
    max-width: 100%;
    border-radius: $border-radius $border-radius 0 0;
    transition: transform 0.15s ease;
  }

  &:hover > img {
    transform: scale(1.1, 1.1);
  }

  .title {
    position: absolute;
    top: 0;
    left: 0;
    margin: 20px;
  }

  .info {
    position: absolute;
    top: 0;
    right: 0;
    margin: 20px;
  }
}

.widget-footer-bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.widget-sm {
  height: 230px;
}

.widget-md {
  height: 373px;
}

.widget-padding-md {
  padding: $widget-padding-vertical $widget-padding-horizontal;
}

.widget-padding-lg {
  padding: $widget-padding-vertical*2 $widget-padding-horizontal*2;
}

.widget-body-container {
  position: relative;
  height: 100%;
}

.widget-top-overflow,
.widget-middle-overflow {
  position: relative;
  margin: 0 (-$widget-padding-horizontal);

  > img {
    max-width: 100%;
  }
}

.widget-top-overflow {
  margin-top: (-$widget-padding-vertical);
  border-top-left-radius: $border-radius;
  border-top-right-radius: $border-radius;
  overflow: hidden;

  > img {
    border-top-left-radius: $border-radius;
    border-top-right-radius: $border-radius;
  }

  > .btn-toolbar {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    margin-right: $widget-padding-horizontal;

    @include media-breakpoint-up(md) {
      top: auto;
      bottom: 0;
    }
  }
}

.widget-icon {
  font-size: 42px;
  height: 60px;
  line-height: 45px;
  display: inline-block;
}

.widget-loader {
  position: absolute;
  top: 0;
  left: 0;
}
