@import '../../styles/variables'
@import '../../styles/animations'

.remindersList
  font-size: 15px
  height: 78px
  line-height: 13px
  margin-left: 16px
  margin-right: auto
  margin-top: 25px
  overflow-y: scroll
  position: relative
  width: calc(100% - 32px)

  &::after
    content: ''
    height: 5px
    left: 0
    position: sticky
    top: 0
    width: 100%

  &::-webkit-scrollbar
    display: none

  &.noReminder
    color: rgba($black, 0.7)
    font-size: 17px
    height: 100%
    line-height: 120px
    margin-left: 0
    text-align: center
    width: 100%

  .reminder
    align-items: center
    display: flex
    margin-bottom: 7px

    .message
      color: $black
      overflow: hidden
      text-overflow: ellipsis
      white-space: nowrap

      .repeatWhen
        color: $black
        font-size: inherit
        height: 16px
        text-align: left

        &.shake
          animation: shake .5s linear

    &.expired
      text-decoration: line-through

      .message
        color: rgba($black, 0.4)

        span
          color: $black
          opacity: 0.4

    svg
      border: 1px solid $brand-red
      border-radius: 50%
      fill: $brand-red
      height: 17px
      margin-right: 5px
      padding: 2px
      width: 17px

    .refresh
      svg
        border-color: $green-text
        fill: $green-text

  &.darkMode
    &.noReminder
      color: rgba($white, 0.5)

    .reminder
      svg
        border: 1px solid $bright-brand-red
        fill: $bright-brand-red

      .refresh
        svg
          border-color: $bright-green-text
          fill: $bright-green-text

      .message
        color: $white

        .repeatWhen
          color: $white

        span
          color: $white

      &.expired
        color: $white

        .message
          color: rgba($white, 0.4)

          span
            color: $white
            opacity: 0.5
