.bin-calendar {
  padding: 12px 20px 35px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  &-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #ebeef5;
    &-title {
      color: $color-text-primary;
      align-self: center;
      font-size: $base-font-size;
    }
  }
  &-week {
    display: flex;
    width: 100%;
    &-item {
      flex: 1;
      text-align: center;
      font-size: $base-font-size;
      color: $color-text-default;
      line-height: $base-line-height;
      font-weight: 400;
      padding: 10px 0;
    }
  }
  &-body {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border-top: $border-base;
    border-left: $border-base;
  }
  &-date-view {
    width: 14.285%;
    height: 80px;
    line-height: $base-line-height;
    padding: 8px;
    border-right: $border-base;
    border-bottom: $border-base;
    cursor: pointer;
    &.is-current-day, &.is-selected {
      color: $color-primary;
    }
    &.is-selected, &:hover {
      background-color: $color-primary-light5;
    }
    &.prev, &.next {
      color: $color-text-disabled;
    }
  }
  &.card {
    width: 300px;
    .bin-calendar-header {
      padding: 10px;
    }
    .bin-calendar-date-view {
      padding: 0;
      height: 34px;
      line-height: 34px;
      text-align: center;
    }
  }
}