$widget-color: #fff;

.widget {
  display: flex;
  margin-bottom: 30px;
  color: $widget-color;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 10%);

  .widget-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 85px;
    padding: 20px;
    font-size: 2.5rem;
    background-color: rgba(0, 0, 0, 30%);
    border-radius: 4px 0 0 4px;
    transition: background-color .5s;
  }

  .widget-content {
    position: relative;
    flex: 1;
    align-self: center;
    padding-left: 20px;
    margin: 0;

    h2,
    h4 {
      margin: 0 0 5px;
      font-size: 2rem;
      font-weight: 300;
      text-transform: uppercase;
    }

    h3 {
      font-weight: 300;
    }

    p {
      margin: 0;
      font-size: 16px;
    }

    span.badge {
      position: absolute;
      top: -15px;
      right: -5px;
      font-size: 1rem;
    }
  }
}

.widget-link {
  @extend .text-decoration-none;

  :hover {
    .widget-icon {
      background-color: transparent;
    }
  }
}

@each $color, $value in $theme-colors {
  .widget-#{$color} {
    background-color: $value;

    &.coloured-icon {
      color: #2a2a2a;
      background-color: $widget-color;

      .icon {
        color: $widget-color;
        background-color: $value;
      }
    }

    .widget-content {
      color: color-contrast($value) if($enable-important-utilities, !important, null);
    }
  }
}

@include color-mode(dark) {
  @each $color, $value in $theme-colors {
    $widget-background: shade-color($value, 60%);
    $widget-icon-background: shade-color($value, 80%);
    $widget-color: shade-color($value, 20%);
    .widget-#{$color} {
      color: $gray-400;
      background-color: $widget-background;
      .icon {
        color: $widget-color;
        background-color: $widget-icon-background;
      }
    }
    .widget-content {
      color: color-contrast($value) if($enable-important-utilities, !important, null);
    }
  }
}