@import '../common/vars.less';


/* Custom Select
============================================================================= */
.custom-select-wrapper {
    display: block;
    position: relative;
}

.custom-select-btn {
    position: relative;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid @buttonColor;
    padding: 10px 10px;
    font-size: 17px;
    height: 40px;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    letter-spacing: 0.1em;
    color: @titleColor;

    .custom-select.active & {
        background: @mainColorScheme;
        box-shadow: -7px 7px 14px 0px rgba(32, 32, 32, 0.2);
        color: @titleColor;
        border-color: @mainColorScheme;
        border-bottom-color: @buttonHoverBg;
        &:hover {
            background: @mainColorScheme;
            box-shadow: -7px 7px 14px 0px rgba(32, 32, 32, 0.2);
            color: @titleColor;
            border-color: @mainColorScheme;
            border-bottom-color: @buttonHoverBg;
        }
    }

    /* Category Toolbar */
    .sorter-item & {
        background: transparent;
        border: 1px solid @buttonColor;
        border-top: none;
        position: relative;
        cursor: pointer;
        float: left;
        height: 45px;
        padding: 0 30px 0 15px;
        font: 15px/45px @fontBody;
        color: @titleColor;
        width: 100%;

        .select-opener {
            position: absolute;
            width: 50px;
            height: 45px;
            right: 0; top: 0;
            &:after {
                background: url(@sprite) -366px -418px no-repeat;
                width: 19px;
                height: 12px;
                content: '';
                position: absolute;
                right: 15px;
                margin-top: -9px;
                top: 50%;
            }
        }

        &.filter.active {
            background: @mainColorScheme;
            border-color: @mainColorScheme;
        }

        @media @tablet {
            padding-right: 40px;
            font-size: 13px;
            height: 39px;
            line-height: 39px;
        }
    }

    &:focus {
        text-decoration: none;
        color: @bodyTextColor;
    }

    &:hover {
        background: @buttonHoverColor;
        text-decoration: none;
        color: @titleColor;
    }

    &:after {
        position: absolute;
        content: '';
        display: block;
        width: 19px;
        height: 12px;
        right: 14px;
        margin-top: -6px;
        top: 50%;
        background: url(@sprite) -366px -419px no-repeat;
        .custom-select.active & {
            background-position: -390px -35px;
        }
    }
    &.active {
        &:after {
            background-position: -390px -35px;
        }
    }

    /* Product Page
    ========================================================================= */
    .product-view & {
        height: 55px;
        padding: 17px 15px;

        @media @tablet {
            height: 50px;
            padding: 16px 15px;
        }
    }

    /* Cart
    ========================================================================= */
    .cart-table & {
        font-size: 15px;
        padding: 13px 34px 11px 15px;
        text-align: left;
        color: @titleColor;
        width: 151px;

        @media @tablet {
            font-size: 14px;
        }
    }

    /* Dashboard
    ========================================================================= */
    .dashboard & {
        padding-left: 18px;
        padding-right: 18px;
    }

    /* Payment Methods
    ========================================================================= */
    .sp-methods & {
        font-size: 13px;
        padding: 12px 10px;
    }

    @media @tablet {
        font-size: 15px;
    }
}

.custom-select-drop {
    position: absolute;
    top: 40px; left: 0;
    z-index: 100;
    text-align: left;
    background: @mainColorScheme;
    padding: 0;
    margin: 0;
    display: none;
    box-shadow: -7px 7px 14px 0px rgba(32, 32, 32, 0.2);
    overflow: auto;
    width: 100%;

    .sorter-item & {
        position: absolute;
        right: 0; top: 45px;
        background: @mainColorScheme;
        padding: 10px 0;
        margin: 0;
        z-index: 10;
        @media @tablet {
            top: 39px;
        }
    }

    .product-view & {
        top: 100%;
    }

    &.mCustomScrollbar {
        li {
            margin-right: 18px;
        }
    }

    li {
        .sorter-item & {
            line-height: 1;
            position: relative;

            &:last-child {
                padding-bottom: 0;
            }

            @media @tablet {
                font-size: 14px;
            }
        }

        &:first-child {
            .product-options & {
                display: none;
            }
            .cart-table & {
                padding-top: 10px;
            }
        }
        &:nth-child(2) {
            .product-options & {
                padding-top: 10px;
            }
        }
        &:last-child {
            .product-options & {
                padding-bottom: 10px;
            }
            .cart-table & {
                padding-bottom: 10px;
            }
        }
    }

    a {
        display: block;
        outline:none;
        text-decoration:none;
        color: @titleColor;
        padding: 8px 18px;
        font-size: 17px;
        line-height: 1;
        cursor: pointer;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        letter-spacing: 0.1em;
        @media @tablet {
            font-size: 15px;
        }

        &:hover {
            background: @mainHoverScheme;
        }

        /* My Account
        ===================================================================== */
        .dashboard & {
            @media @tablet {
                font-size: 14px;
            }
        }

        /* Cart
        ===================================================================== */
        .cart-table & {
            font-size: 15px;

            @media @tablet {
                font-size: 14px;
            }
        }

        /* Payment Methods
        ===================================================================== */
        .sp-methods & {
            font-size: 13px;
        }

        /* Sorter */
        .sorter-item & {
            color: @titleColor;
            padding: 5px 16px;
            display: block;
            text-transform: none;
            font-size: 15px;
            &.selected {
                color: #388196;
                &:after {
                    position: absolute;
                    content: '';
                    display: block;
                    right: 16px; top: 50%;
                    margin-top: -10px;
                    width: 18px;
                    height: 18px;
                    background: url(@sprite) -423px -31px no-repeat;
                }
            }

            @media @tablet {
                font-size: 14px;
                padding-right: 30px;
            }
        }
    }

    /* Cart
    ========================================================================= */
    .cart-table & {
        top: 100%;
    }

    /* Payment Methods
    ===================================================================== */
    .sp-methods & {
        font-size: 13px;

        @media @tablet {
            font-size: 14px;
        }
    }
}

 /* custom */

.product-view .custom-select-btn {
  height: 55px;
  padding: 17px 15px;
}

.custom-select-btn {
  position: relative;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid #c8c8c8;
  padding: 10px 10px;
  font-size: 17px;
  height: 40px;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  letter-spacing: 0.1em;
  color: #323232;
}

.custom-select-btn:after {
  position: absolute;
  content: '';
  display: block;
  width: 19px;
  height: 12px;
  right: 14px;
  margin-top: -6px;
  top: 50%;
  background: url('/skin/frontend/enterprise/flatspot/images/sprite.png') -366px -419px no-repeat;
}

.custom-select.active .custom-select-btn {
  background: #00e1f5;
  box-shadow: -7px 7px 14px 0px rgba(32, 32, 32, 0.2);
  color: #323232;
  border-color: #00e1f5;
  border-bottom-color: #0096a5;
}

.custom-select-drop {
  position: absolute;
  top: 40px;
  left: 0;
  z-index: 100;
  text-align: left;
  background: #00e1f5;
  padding: 0;
  margin: 0;
  display: none;
  box-shadow: -7px 7px 14px 0px rgba(32, 32, 32, 0.2);
  overflow: auto;
  width: 100%;
}

.product-options .custom-select-drop li:first-child {
  display: none;
}

.product-options .custom-select-drop li:nth-child(2) {
  padding-top: 10px;
}

.custom-select-drop a {
  display: block;
  outline: none;
  text-decoration: none;
  color: #323232;
  padding: 8px 18px;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  letter-spacing: 0.1em;
}

.product-options .custom-select-drop li:last-child {
  padding-bottom: 10px;
}

.custom-select-drop a:hover {
  background: #00cadc;
}