@import "./var.scss";

.item-body {
    // display: flex;
    // align-items: center;
    overflow: hidden;
    position: relative;

    transition: all .6s ease-in-out 0s;
    transform: translateX(0);

    &:not([class*="disabled"]):active {
        background-color: #e5e5e5;
    }

    &.arrow {
        .item-content {
            .item-title {
                .extra-box {
                    margin-right: 25Px;
                }
            }
        }
    }

    .item-content {
        display: flex;
        flex-direction: column;
        justify-content: center;

        .item-title {
            .extra-box {

                justify-content: center;
                align-items: center;
                display: flex;
            }
        }


        .item-sub-title {
            flex: 1;
        }

        .item-footer {
            align-items: flex-end;
        }

    }



    &.border {
        &-short {
            &.solid-bottom {
                &.padding {
                    &::after {
                        left: 15Px;
                        width: calc(200% - 30Px);
                    }
                }

                &.padding-xs {
                    &::after {
                        left: 5Px;
                        width: calc(200% - 10Px);
                    }
                }

                &.padding-sm {
                    &::after {
                        left: 10Px;
                        width: calc(200% - 20Px);
                    }
                }

                &.padding-lg {
                    &::after {
                        left: 20Px;
                        width: calc(200% - 40Px);
                    }
                }

                &.padding-xl {
                    &::after {
                        left: 25Px;
                        width: calc(200% - 50Px);
                    }
                }
            }
        }

        &-center {
            &.solid-bottom {
                &.padding-md {
                    &::after {
                        left: 15Px;
                        width: calc(200% - 60Px);
                    }
                }

                &.padding-xs {
                    &::after {
                        left: 5Px;
                        width: calc(200% - 20Px);
                    }
                }

                &.padding-sm {
                    &::after {
                        left: 10Px;
                        width: calc(200% - 40Px);
                    }
                }

                &.padding-lg {
                    &::after {
                        left: 20Px;
                        width: calc(200% - 80Px);
                    }
                }

                &.padding-xl {
                    &::after {
                        left: 25Px;
                        width: calc(200% - 100Px);
                    }
                }
            }
        }
    }

    &.arrow {

        //margin-right: 20Px;
        &:before {
            content: "\e6a3";
            position: absolute;

            right: 20Px;

            display: block;
            margin: auto;
            width: 15Px;
            height: 15Px;
            color: $gray;
            text-align: center;
            font-size: 17Px;
            font-family: EIcon;
        }
    }

    &.checked {
        padding-right: 30Px;

        &:before {
            content: "\e645";
            position: absolute;
            top: 0;
            right: 10Px;
            bottom: 0;
            display: block;
            margin: auto;
            width: 15Px;
            height: 30px;
            color: $grey;
            text-align: center;
            font-size: 15Px;
            font-family: EIcon;
            line-height: 15Px;
        }
    }

    &.check-box {
        padding-left: 30Px;

        &:before {
            content: "\E75B";
            position: absolute;
            top: 0;
            left: 5Px;
            bottom: 0;
            display: block;
            margin: auto;
            width: 15Px;
            height: 15Px;
            color: $grey;
            text-align: center;
            font-size: 17Px;
            font-family: EIcon;
            line-height: 15Px;
        }
    }
}

.thumb {
    +.taro-img {
        width: auto;
        height: auto;
    }

    &-left,
    &-right {
        display: flex;
        //max-height: 0
    }

    &-bottom,
    &-center,
    &-top {
        // margin-top: 15Px;
        // margin-bottom: 15Px;
        display: grid;
        text-align: center;
        grid-gap: 8Px;

        &.image-2 {
            grid-template-columns: 1fr 1fr;
        }

        &.image-3,
        &.image-more {
            grid-template-columns: 1fr 1fr 1fr;
        }

        .taro-img {
            width: 100%;
            height: 100%;
            //max-height : 150Px;
        }
    }
}

.column {
    overflow: hidden;

    &.item-column {
        overflow: hidden;
    }
}