MOFA/components/search_section/search_section.css

.search-section {
    --tab-img-active: url("data:image/svg+xml,%3Csvg width='174' height='48' viewBox='0 0 174 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M174 48C166.082 48 158.997 43.3747 155.871 36.1799L145.244 11.8201C142.118 4.62527 135.033 0 127.114 0H14.5866C6.56398 0 0 6.47538 0 14.3897V48H174Z' fill='%23212B36'/%3E%3C/svg%3E");
    --tab-img-inactive: url("data:image/svg+xml,%3Csvg width='175' height='50' viewBox='0 0 175 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M175 49C167.031 49 159.9 44.3747 156.754 37.1799L146.058 12.8201C142.912 5.62527 135.782 1 127.812 1H15.6806C7.60627 1 1 7.47538 1 15.3897V49H175Z' fill='%23F0F0F0' stroke='white' stroke-width='2' stroke-miterlimit='10'/%3E%3C/svg%3E%0A");

    .tabs {
        position: relative;
        margin-top: 48px;

        &.none {
            margin-top: 0;
        }

        .tab {
            position: absolute;
            width: 100%;

            .tab-head {
                position: absolute;
                top: -48px;
                width: 174px;
                height: 48px;
                background-image: var(--tab-img-inactive);
                background-repeat: no-repeat;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;

                p {
                    transform: translateX(-10px);
                    color: #666666;
                    font-size: 1.25em;
                    font-weight: 500;
                }
            }

            .tab-content {
                display: none;
            }

            .tab-content {
                height: calc(133px);
                border-radius: 0px 16px 16px 16px;
                background-color: #212B36;

                &.col2 {
                    height: calc(210px);
                }

                &.all-radius {
                    border-radius: 16px;
                }
            }

            &[active] {
                .tab-head {
                    background-image: var(--tab-img-active);
                    z-index: 5;

                    p {
                        color: #fff;
                        font-size: 1.25em;
                        font-weight: 700;
                    }
                }

                .tab-content {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    width: 100%;

                    form {
                        display: flex;
                        justify-content: space-between;
                        flex-grow: 1;
                        padding: 0 40px;

                        &.flex-start {
                            justify-content: flex-start;
                        }

                        span {
                            height: 1em;
                        }

                        select {
                            width: 180px;
                            height: 52px;
                            padding: 12px 16px 12px 16px;
                            border-radius: 8px;

                            &.black {
                                background-color: transparent;
                                color: #fff;
                                border: 0;
                                box-shadow: inset 0 0 0 1px #FFFFFF;
                            }

                            &.search-section-select {
                                appearance: none;
                                -webkit-appearance: none;
                                font-size: 18px;
                                background-color: #FFFFFF;
                                border: 0;
                                border-radius: 8px;
                                padding: 0 16px;
                                width: 107px;
                                color: #444;
                                cursor: pointer;
                                outline: none;
                                height: 41px;
                                background-image: var(--select-icon);
                                background-repeat: no-repeat;
                                background-position-y: center;
                                background-position-x: calc(100% - 16px);
                            }
                        }

                        .tab-search-field {
                            display: inline-block;
                            position: relative;
                            --search-icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5605 18.4394L16.7527 14.6317C17.5395 13.4459 18 12.0262 18 10.4999C18 6.36444 14.6355 2.99994 10.5 2.99994C6.36447 2.99994 2.99997 6.36444 2.99997 10.4999C2.99997 14.6354 6.36447 17.9999 10.5 17.9999C12.0262 17.9999 13.446 17.5394 14.6317 16.7527L18.4395 20.5604C19.0245 21.1462 19.9755 21.1462 20.5605 20.5604C21.1462 19.9747 21.1462 19.0252 20.5605 18.4394ZM5.24997 10.4999C5.24997 7.60494 7.60497 5.24994 10.5 5.24994C13.395 5.24994 15.75 7.60494 15.75 10.4999C15.75 13.3949 13.395 15.7499 10.5 15.7499C7.60497 15.7499 5.24997 13.3949 5.24997 10.4999Z' fill='%23212B36'/%3E%3C/svg%3E%0A");

                            button {
                                background-image: var(--search-icon);
                                background-color: #fff;
                                position: absolute;
                                right: 20px;
                                top: calc(52px / 2);
                                transform: translateY(-50%);
                                height: 24px;
                                width: 24px;
                                border: 0;
                            }

                            input {
                                &[type="search"] {
                                    width: 480px;
                                    height: 52px;
                                    padding: 0 16px;
                                    border-radius: 8px;

                                    &::placeholder {
                                        font-size: 1.125em;
                                        font-weight: 400;
                                        line-height: 1.534em;
                                        color: #999999;
                                    }
                                }
                            }
                        }

                        input {
                            &[type="date"] {
                                width: 148px;
                                height: 41px;
                                padding: 0 16px;
                                gap: 0px;
                                border-radius: 8px;
                                justify-content: space-between;
                                opacity: 0px;
                                border: initial;

                                &[height] {
                                    height: 100%;
                                }
                            }


                        }
                    }
                }

                &:nth-of-type(1) {
                    .tab-head {
                        left: calc(140px * 0);
                        z-index: 9;
                    }
                }

                &:nth-of-type(2) {
                    .tab-head {
                        left: calc(140px * 1);
                        z-index: 9;
                    }
                }

                &:nth-of-type(3) {
                    .tab-head {
                        left: calc(140px * 2);
                        z-index: 9;
                    }
                }

                &:nth-of-type(4) {
                    .tab-head {
                        left: calc(140px * 3);
                        z-index: 9;
                    }
                }

                &:nth-of-type(5) {
                    .tab-head {
                        left: calc(140px * 4);
                        z-index: 9;
                    }
                }


            }

            &:nth-of-type(1) {
                .tab-head {
                    left: calc(140px * 0);
                    z-index: 5;
                }
            }

            &:nth-of-type(2) {
                .tab-head {
                    left: calc(140px * 1);
                    z-index: 4;
                }
            }

            &:nth-of-type(3) {
                .tab-head {
                    left: calc(140px * 2);
                    z-index: 3;
                }
            }

            &:nth-of-type(4) {
                .tab-head {
                    left: calc(140px * 3);
                    z-index: 2;
                }
            }

            &:nth-of-type(5) {
                .tab-head {
                    left: calc(140px * 4);
                    z-index: 1;
                }
            }
        }
    }
}