@use "../abstracts/"as *;

.work-process {
  .work-process-wrapper {
    .work-process-list {
      @include flex($direction:column);

      .work-process-item {
        @include flex($align:start, $justify:space-between, $gap:50px);
        border-bottom: 1px solid $border-ternary;
        padding-block: 40px 25px;
        position: relative;
        cursor: pointer;

        @include lg-down {
          padding-block: 30px 10px;
        }

        &:first-child {
          padding-block-start: 0;
        }

        &:hover {
          .work-process-content {
            .work-process-description {
              grid-template-rows: 1fr;
              padding-block: 15px;
            }
          }

          .work-process-action {
            background-color: $color-primary;
            color: $color-primary-text;
          }

          .work-process-img {
            opacity: 1;
            visibility: visible;
          }
        }

        .work-process-content {
          max-width: 720px;
          width: 100%;
          @include lg-down {
           max-width: 400px;
          }
          >h5 {
            font-size: 30px;

            @include xxl-down {
              font-size: 24px;
            }

            @include lg-down {
              font-size: 20px;
            }

            @include sm-down {
              font-size: 18px;
            }
          }

          .work-process-description {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows 0.4s ease-out;

            >p {
              font-size: 16px;
              overflow: hidden;
            }
          }
        }

        .work-process-action {
          @include flex($align:center, $justify:center);
          width: 56px;
          height: 56px;
          border-radius: $radius-rounded;
          font-size: 20px;
          color: $text-primary;
          transition: 0.3s ease-in-out;
          background-color: transparent;
          [dir="rtl"] & {
              transform: rotate(-90deg);
          }
          @include lg-down {
            width: 44px;
            height: 44px;
            font-size: 18px;
          }

          &:hover {
            background-color: $color-primary;
            color: $color-primary-text;
          }
        }

        .work-process-img {
          position: absolute;
          inset-block-start: 0;
          inset-inline-end: 100px;
          aspect-ratio: 16/15;
          width: 250px;
          z-index: 5;
          opacity: 0;
          visibility: hidden;
          transition: 0.3s ease-in-out;
          @include lg-down {
            right: 50px;
            width: 200px;
          }
          @include sm-down {
            display: none;
          }

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

  }
}