app-friend-request {
  background: var(--ion-background-content);

  ion-header {
    ion-toolbar {
      display: flex;
      justify-content: space-between;

      ion-icon {
        font-size: var(--ion-font-size-24);
      }
    }
  }

  ion-content {
    --background: var(--ion-background-content);
    --padding-start: var(--ion-padding-15);
    --padding-end: var(--ion-padding-15);

    ion-segment {
      display: flex;
      padding: var(--ion-padding-10) 0;
      background: var(--ion-color-white);
      margin-top: var(--ion-margin-15);

      ion-segment-button {
        min-height: 30px;
        --indicator-height: 0;
        background: #efefef;
        text-transform: capitalize;

        ion-label {
          margin: var(--ion-margin-0);
          font-size: var(--ion-font-size-14);
          letter-spacing: 0;
        }

        &.segment-button-checked {
          border-radius: 5px;
          background: var(--ion-color);
          color: #fff !important;

          ion-label {
            color: #fff !important;
          }
        }

        &:first-child {
          border-radius: 8px 0 0 8px;

          &.segment-button-checked {
            border-radius: 5px;

            ion-label {
              color: #fff !important;
            }
          }
        }

        &:last-child {
          border-radius: 0 8px 8px 0;

          &.segment-button-checked {
            border-radius: 5px;

            ion-label {
              color: #fff !important;
            }
          }
        }
      }
    }

    ion-card {
      margin: var(--ion-margin-0);
      box-shadow: none;
      border-radius: 0 8px;

      ion-card-header {
        padding: var(--ion-padding-0);

        h3 {
          p {
            color: var(--ion-color);
          }
        }

        ion-card-title {
          font-size: var(--ion-font-size-14);
          display: flex;
          justify-content: space-between;
          margin: var(--ion-margin-0);
          align-items: center;
          padding: var(--ion-padding-10);
          border-bottom: 1px solid #efefef;

          .left-data {
            display: flex;
            align-items: center;
            width: calc(100% - 30px);

            .icons {
              color: var(--ion-color);
              margin-right: var(--ion-margin-10);
              position: relative;

              span {
                overflow: hidden;
                width: 50px;
                height: 50px;
                background: var(--ion-background-content);
                border-radius: var(--ion-border-radius-100);
                display: flex;
                align-items: center;
                justify-content: center;
              }

              ion-icon {
                position: absolute;
                right: 0;
                bottom: 0;
                background: var(--ion-color-white);
                padding: 3px;
                border-radius: var(--ion-border-radius-100);
                color: var(--ion-color);
                box-shadow: 0px 0px 2px #000;

                &.heart {
                  color: #f00;
                }
              }

              div {
                position: absolute;
                right: 0;
                bottom: 0;
                background: var(--ion-color-white);
                padding: 3px;
                border-radius: var(--ion-border-radius-100);
                width: 20px;
                height: 20px;
                box-shadow: 0px 0px 2px #000;
                display: flex;
                align-items: center;
                justify-content: center;

                img {
                  width: auto;
                  height: 100%;
                }
              }
            }

            .content {
              width: calc(100% - 60px);

              ion-button {
                height: 25px;
                margin: var(--ion-margin-10) 4% 0 0;
                width: 48%;

                &:last-child {
                  margin-right: 0;
                }

                &::part(native) {
                  text-transform: capitalize;
                }

                &.si {
                  &.reject-btn {
                    &::part(native) {
                      text-transform: capitalize;
                      --background: var(--ion-background-button);
                      color: var(--ion-color);
                    }
                  }
                }
              }

              p {
                padding: var(--ion-padding-0);
                margin: var(--ion-margin-0);
                font-size: var(--ion-font-size-14);
                color: #000;
                line-height: 14px;
                font-weight: 600;

                span {
                  color: #585858;
                  font-size: var(--ion-font-size-12);
                  font-weight: 400;
                }
              }
            }
          }

          &.unread {
            background: var(--ion-background-content);
          }

          ion-button {
            max-width: 95px;
            width: 100%;
            height: 30px;
            margin: 0;

            &::part(native) {
              padding-top: 5px;
              padding-bottom: 5px;
            }
          }
        }

        &.friends-suggestions {
          ion-card-title {
            .left-data {
              width: 100%;

              .content {
                ion-button {
                  margin-top: 5px;

                  &.reject {
                    &::part(native) {
                      --background: #ED5858;
                    }
                  }
                }
              }
            }
          }
        }
      }

      h3 {
        &.title {
          padding: 0 var(--ion-padding-10);
          color: var(--ion-color);
          display: flex;
          align-items: center;
          justify-content: space-between;

          span {
            font-size: var(--ion-font-size-14);
            color: #000;
          }
        }
      }
    }
  }

  ion-footer {
    height: 50px;
    height: calc(env(safe-area-inset-bottom) + 60px);

    ion-tab-bar {

      &.ios {
        padding: 0;
        padding-bottom: calc(env(safe-area-inset-bottom) + 10px);
      }
    }
  }
}