@import '../helpers/helpers';

.page_kitchen-claims {

  .container {
    @include media-breakpoint-down(sm) {
      padding-left: 0;
      padding-right: 0;
    }

    .page {
      &-header,
      &-content {
        @include media-breakpoint-down(sm) {
          padding: 0 15px;
        }
      }

      &-header {
        @include media-breakpoint-up(md) {
          @include make-col(10);
          @include make-col-offset(1);
        }

        @include media-breakpoint-up(lg) {
          @include make-col(8);
          @include make-col-offset(2);
        }
      }

      &-content {
        background: $gray-bg;

        @include media-breakpoint-down(sm) {
          padding: 20px 15px;
        }

        @include media-breakpoint-up(sm) {
          padding: 30px 0;
        }

        .form-row {
          @include media-breakpoint-down(sm) {
            padding: 0;
          }

          &__field {
            label {
              &:first-child {
                width: 35%;

                @include media-breakpoint-down(sm) {
                  width: 100%;
                  padding-bottom: 20px;
                }
              }
            }

            &.error-field {
              margin-bottom: 30px;
            }
          }

          &__action {
            &_custom {
              &::before {
                left: 15px;
                right: 15px;

                @include media-breakpoint-up(lg) {
                  left: -150px;
                  right: -150px;
                }
              }

              .form-row__col-btn {
                margin-left: 0;
                padding-left: 0;
                padding-right: 0;

                .btn {
                  width: 160px;

                  @include media-breakpoint-down(sm) {
                    width: 100%;
                  }
                }
              }
            }
          }

          &__label {
            @include media-breakpoint-down(sm) {
              display: flex;
            }
          }
        }
      }
    }

    .form-claim {
      @include media-breakpoint-up(md) {
        @include make-col(10);
        @include make-col-offset(1);
      }

      @include media-breakpoint-up(lg) {
        @include make-col(6);
        @include make-col-offset(3);
      }

      &__descr {

        h3 {
          margin-bottom: 20px;
        }

        &__tel {
          text-decoration: none;
          color: $gray-dark;
        }
      }

      &__info-client,
      &__info-claim {
        border-top: 1px solid $gray;
        padding-top: 20px;
      }

      &__photo-wrapper {
        @include make-col(12);
        display: flex;
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid $gray-light;
      }


      &__photo {
        @include make-col(3);
        margin-right: 10px;
        min-width: 120px;
        flex: 2;

        &-add {
          margin-bottom: 0;

          input {
            opacity: 0;
            position: absolute;
          }

          svg {
            color: $green;
          }
        }

        &-add,
        &-upload {
          &-link {
            text-decoration: underline;
            color: $blue;
            font-weight: 500;
            cursor: pointer;
          }
        }

        &-link {
          @include make-col(8);
          color: $blue;
          text-decoration: underline;
          font-weight: 500;
          word-break: break-all;
          margin-right: 40px;
          flex: 4;
        }

        &-close {
          @include make-col(1);
          float: right;
          position: absolute;
          right: 15px;
          color: $gray;
          flex: 1;
        }
      }
    }
  }

  .modal-box {
    &__container {
      margin: 10% auto;
    }

    .icon__close {
      position: absolute;
      right: 15px;
      top: -25px;
      border-radius: 50%;
      background: $white;
      height: 1rem;
      width: 1rem;

      svg {
        background: $white;
        border-radius: 50%;
        width: .625rem;
        height: .625rem;
        bottom: 5px;
        position: relative;
      }
    }

    &_full {
      background-color: initial;
    }
  }

  &__modal-pic {
    width: 100%;
    height: auto;
  }
}