@import 'colors.scss';
@import 'variables.scss';

:host {

  border-radius: $border-radius-8;
  cursor: pointer;

  .empty-item {
    background-color: $white;
    border: 1px solid $hardly-grey-color;
  }

  &.selected {
    background: $brain-gradient;

    .date {
      .month,
      .year {
        color: $white;
      }
    }
  }

  .calendar {
    color: $charcoal-grey-color;
    width: 72px;
    border-radius: $border-radius-8;

    .header {
      border-bottom: 1px solid $charcoal-grey-color;
      display: flex;
      justify-content: space-between;
      padding: 6px 14px;

      .dot {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background-color: $charcoal-grey-color;
      }
    }

    .content {
      font-size: $font-size-10;
      font-style: normal;
      font-weight: normal;
      line-height: $font-size-16;
      overflow: hidden;
      padding: $padding-8;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;

      b.time {
        font-size: $font-size-12;
      }
    }
  }

  .date {
    padding: $padding-2 0;

    .month,
    .year {
      font-size: $font-size-10;
      font-style: normal;
      font-weight: 600;
      line-height: $font-size-16;
      text-align: center;
      text-transform: uppercase;
    }
  }
}
