@import '@/styles/responsive.scss';
@import 'rfs/scss';

.notificationIcon {
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1);
  border: 1px solid #f9f8f6;

  border-radius: 50px;
  background: rgba(56, 124, 68, 0.1);
  padding: 11px;
  width: 50px;
  min-width: 50px;
  height: 50px;

  @include small-screen {
    width: 40px;
    min-width: 40px;
    height: 40px;
  }
}

.userIcon {
  width: 48px;
  min-width: 50px;
  height: 48px;

  @include small-screen {
    width: 35px;
    min-width: 35px;
    height: 35px;
  }

  img {
    border: 1px solid white;
    width: 100%;
    height: 100%;
  }
}

.header {
  position: relative;
  @include padding-top(0.7rem);
  @include padding-bottom(0.7rem);

  &::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(56, 124, 68, 0.2);
    width: 100%;
    max-width: 95%;
    height: 1px;
    content: '';
  }
}