/* #Notification
   -------------------------------------------------------------------------- */
/*doc
---
title: notification
name: notification
categories: [project]
---

お知らせアイコンのコンポーネントです。

```block
```
*/

.p{
  &-notification{
    padding: 6px 6px 0 0;
    display: block;
    @include sp{
      position: absolute;
      right: 18px;
      top: 18px;
      z-index: 5;
    }
    &-icon{
      width: 44px;
      height: 44px;
      position: relative;
      cursor: pointer;
      color: rgb(51, 51, 51);
      @include pc{
        width: 48px;
        height: 48px;
      }
      @include min{
        width: 40px;
        height: 40px;
      }
      &-wrap{
        .count{
          position: absolute;
          right: -6px;
          top: -6px;
          background-color: #D82828;
          color: rgb(255, 255, 255);
          display: flex;
          flex-direction: row;
          -webkit-box-pack: center;
          justify-content: center;
          -webkit-box-align: center;
          align-items: center;
          z-index: 1;
          border-radius: 200px;
          min-width: 18px;
          height: 18px;
          padding: 2px;
          font-size: 1.2rem;
          font-weight: 500;
          line-height: 1;
          @include pc{
            min-width: 20px;
            height: 20px;
          }
          @include min{
            min-width: 14px;
            height: 14px;
            font-size: 1rem;
            right: -5px;
            top: -5px;
          }
        }
        .icon{
          width: 21px;
          height: 18px;
          @include min{
            width: 18px;
            height: 15px;
          }
        }
      }
      &-bg{
        width: 100%;
        height: 100%;
        background-color: $_color-ui-yellow;
        border-radius: 500px;
        position: absolute;
        top: 0px;
        left: 0px;
        box-shadow: 0 1px 4px rgba(0,0,0,.1);
      }
    }
    
  }
}