@import '../variables/default.scss';
@import '../mixins/index.scss';

$Component: '.at-notice';

#{$Component} {
  background: $color-bg;
  border-radius: $border-radius-xl;
  padding: $spacing-h-lg;
  display: flex;
  align-items: center;

  &-icon {
    height: $at-notice-icon-size;
    width: $at-notice-icon-size;
    border-radius: 50%;
    margin-right: 40px;
  }

  &-content {
    flex: 1;
    width: 0;
    font-size: $font-size-base;

    #{$Component}-list-item {
      display: flex;
      align-items: center;

      &:not(:last-of-type) {
        margin-bottom: $spacing-v-xs;
      }

      &-dot {
        position: relative;
        flex: 0 0 6px;
        height: 6px;

        .item-dot {
          background: $color-grey-0;
          margin: 0 20px 0 -20px;
          @include circle(6px);
          @include absolute-center();

          transform: translate(-50%, -50%) scale(0.1);
        }
      }

      &-title,
      &-empty-text {
        @include line();
      }

      &-time {
        color: $color-grey-2;
        margin-left: $spacing-h-md;
        white-space: nowrap;
      }
    }
  }

  &-arrow {
    font-size: 30px;
    color: $color-grey-3;
    margin-left: $spacing-h-md;
  }

  &-unread-dot {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: $color-error;
    margin-left: $spacing-h-md;
  }
}