$sortH: 40px;
$sortW: 200px;
$tinyW: 50px;
$textW: 120px;
$iconM: 5px;
$iconW: $sortW - $tinyW - $textW - (2 * $iconM) - 2;

.sort {
    position: absolute;
    right: 0;
    top: 0;
    width: $sortW;
    z-index: 1;
}

.sort-item {
    border: 1px solid #d5d5d5;
    cursor: pointer;
    font-size: 0;
    line-height: $sortH;
    margin-bottom: 5px;
    opacity: 0.2;
    width: $sortW;

    &:hover {
        opacity: 0.6;
    }

    &.active {
        opacity: 1;

        .sort-icon {
            visibility: visible;
        }
    }
}

.sort-text {
    display: inline-block;
    font-size: 13px;
    padding-left: 10px;
    text-align: left;
    vertical-align: top;
    width: $textW;
}

.sort-tiny {
    display: inline-block;
    font-size: 9px;
    line-height: $sortH;
    text-align: center;
    text-transform: uppercase;
    vertical-align: top;
    width: $tinyW;
}

.sort-icon {
    height: $iconW;
    margin: ($sortH - $iconW) / 2 $iconM;
    vertical-align: top;
    visibility: hidden;
    width: $iconW;
}