@mixin attendance-theme() {
  app-attendance {
    .attendance-list {
      background-color: $off-white;
      box-shadow: -2px 6px 9px #2f2c8333;
      padding: 20px;
      margin: 20px 0;
      border-radius: 18px;
      h1 {
        color: $main-color;
        font-size: 18px;
        span {
          margin: 0 10px;
        }
      }
      &__user {
        padding: 20px 0;
        div {
          p {
            color: $light-blue;
            font-size: 20px;
          }
          span {
            display: block;
            font-size: 14px;
            color: #7b8793;
            margin: 5px 0;
          }
        }
      }
    }

    .attendance-company {
      background-color: $off-white;
      box-shadow: -2px 6px 9px #2f2c8333;
      padding: 20px;
      margin: 20px 0;
      border-radius: 18px;
      main {
        h1 {
          color: $main-color;
        }
        p {
          background-color: #2e368f0c;
          border-radius: 10px;
          padding: 10px 20px;
          color: $main-color;
          font-size: 14px;
        }
      }
      &__search {
        margin: 40px 0;
        position: relative;
        img {
          position: absolute;
          top: 10px;
        }
        input {
          padding: 10px 15px;
          border: 1px solid $white-color;
          background-color: $white-color;
          box-shadow: 0px 4px 12px #0000001a;
          border-radius: 19px;
          background-color: $white-color;
          outline: none;
          font-size: 15px;
          width: 40%;
        }
      }
    }
  }
}
