@use '../../styles/variables';

@mixin vote-color-variant($color) {
    background: rgba($color, 0.1);
    color: $color;
    &:hover {
        background: rgba($color, 0.2);
        color: $color;
    }
    &.has-voted {
        background: $color;
        color: variables.$white;
    }
}
@mixin vote-color-variant-weak($color) {
    background-color: variables.$gray-100;
    color: variables.$gray-600;
    &:hover {
        background: rgba($color, 0.2);
        color: $color;
    }
    &.has-voted {
        background: rgba($color, 0.1);
        color: $color;
        &:hover {
            background: rgba($color, 0.2);
            color: $color;
        }
    }
}
@mixin vote-variant($padding, $fontSize, $iconSize) {
    padding: $padding;
    line-height: $fontSize;
    font-size: $fontSize;
    .thy-icon {
        font-size: $iconSize;
    }
    img {
        width: $iconSize;
        height: $iconSize;
    }
}

.thy-vote {
    display: inline-flex;
    border-radius: 4px;
    cursor: variables.$hand-cursor;
    .thy-icon,
    img {
        display: block;
    }
}
.thy-vote-vertical {
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    .thy-icon {
        margin-bottom: variables.$vote-layout-vertical-icon-margin-bottom;
    }
    img {
        margin-bottom: variables.$vote-layout-vertical-icon-margin-bottom;
    }
}

.thy-vote-vertical-size-sm {
    width: variables.$vote-layout-vertical-sm;
    @include vote-variant(variables.$vote-layout-vertical-padding-sm, variables.$font-size-xs, variables.$font-size-sm);
}

.thy-vote-vertical-size-default {
    width: variables.$vote-layout-vertical-default;
    @include vote-variant(variables.$vote-layout-vertical-padding-default, variables.$font-size-base, variables.$font-size-md);
}

.thy-vote-horizontal {
    align-items: center;
    justify-content: space-between;
    .thy-icon {
        margin-right: variables.$vote-layout-horizontal-icon-margin-right;
    }
    img {
        margin-right: variables.$vote-layout-horizontal-icon-margin-right;
    }
}

.thy-vote-horizontal-size-sm {
    @include vote-variant(variables.$vote-layout-horizontal-padding, variables.$font-size-sm, variables.$font-size-sm);
}

.thy-vote-horizontal-size-default {
    @include vote-variant(variables.$vote-layout-horizontal-padding, variables.$font-size-base, variables.$font-size-md);
}

.thy-vote-round {
    border-radius: 12px;
}

.thy-vote-success {
    @include vote-color-variant(variables.$success);
}

.thy-vote-primary {
    @include vote-color-variant(variables.$primary);
}

.thy-vote-success-weak {
    @include vote-color-variant-weak(variables.$success);
}

.thy-vote-primary-weak {
    @include vote-color-variant-weak(variables.$primary);
}

.thy-vote-disabled {
    pointer-events: none;
}

.thy-vote-disabled {
    pointer-events: none;
}
