/// Badges
///

.dp-badge {
  @include border-radius("m-l");
  width: 80px;
  padding: 5px;
  text-align: center;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: $primary-font;
  font-size: $font-size-s;
  font-weight: $pf-bold;
  line-height: $font-size-s;
  box-shadow: 0 1px 0 $dp-greyscale-400;

  &, & * {
    box-sizing: border-box;
  }
}

/// Circle Badge
///

.dp-circle-badge {
  @include border-radius("circular");
  width: 20px;
  height: 20px;
  padding: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-overflow: clip;
}

/// Icon Badge
///

.dp-icon-badge {
  display: inline-block;
  position: relative;

  .dp-circle-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 16px;
    height: 16px;
    z-index: $dp-zindex-overlay;
  }

  .dp-icon {
    z-index: $dp-zindex-bottom;
  }
}

/// Date Badge
///

.dp-date-badge {
  width: 24px;
  text-align: center;
  display: inline-block;
  border: 1px solid $dp-greyscale-550;

  &, & * {
    box-sizing: border-box;
  }
}

.dp-date-badge--pill {
  @include border-radius("m");
  width: 42px;
  display: inline-flex;
  align-items: center;

  .dp-date-badge__month {
    width: 24px;
  }

  .dp-date-badge__day {
    width: 18px;
  }
}

.dp-date-badge__month {
  display: flex;
  justify-content: center;
  padding: 1px;
  background-color: $dp-greyscale-550;
  font-family: $primary-font;
  font-size: $font-size-s;
  font-weight: $pf-regular;
  line-height: $font-size-s;
  color: $dp-greyscale-00;
  text-transform: uppercase;
}

.dp-date-badge__day {
  display: flex;
  justify-content: center;
  padding: 1px;
  font-family: $primary-font;
  font-size: $font-size-s;
  font-weight: $pf-regular;
  line-height: $font-size-s;
  color: $dp-greyscale-550;
}