/**
 * Reset
 */
*, *::before, *::after {
    box-sizing: border-box;
    vertical-align: baseline;
}

/**
 * Variables
 */
.widget {
    --color-primary: #0288D1;
    --color-primary-contrast: #FFFFFF;
    --color-secondary: #DDDDDD;
    --color-secondary-contrast: #FFFFFF;
    --color-background: #f2f2f2;
    --color-background-contrast: #FFFFFF;
    --color-dark: #666666;
    --color-dark-contrast: #FFFFFF;
    --color-success: #90BE6D;
    --color-error: #F26418;
    --color-error-contrast: #FFFFFF;

    --size-small: 12px;
    --size-regular: 16px;
    --size-medium: 18px;
    --size-large: 24px;

    --space-compact: 0.5em;
    --space-normal: 1em;
    --space-comfortable: 1.5em;

    --radius-sharp: 0;
    --radius-rounded: 0.5em;
}

/**
 * Widget
 */
.widget {
    position: relative;
    margin: var(--space) 0;
    font-size: var(--size);
    background: var(--color-background);
    border-radius: var(--radius);
    transition: all 150ms ease-in;
    text-align: center;
}

.widget.is-ready {
    display: block;
}

/**
 * Widget > title
 */
.widget > .title {
    padding: var(--space) 0;
    margin: 0;
    font-size: 1.25em;
    color: var(--color-dark);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/**
 * Widget > description
 */
.widget > .description {
    padding: var(--space) var(--space) 0;
    margin: 0;
    font-size: 0.85em;
}

/**
 * Attributes
 */
.attributes {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

/**
 * Attribute
 */
.attribute {
    flex: 1 0 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space);
    transition: all 150ms ease-in;
}

/**
 * Attribute
 */
.attribute + .attribute {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/**
 * Attribute > label
 */
.attribute > .label {
    font-size: 1em;
    font-weight: normal;
    margin: 0;
    color: var(--color-dark);
}

/**
 * Attribute [PROCESSING]
 */
.attribute.is-processing {
    opacity: 0.35;
    pointer-events: none;
}

/**
 * Attribute radio inputs
 */
.attribute input {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}


@keyframes form-appearance {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

/**
 * Form
 */
.form {
    padding: var(--space) 0;
    width: 100%;
    max-width: 18em;

    transition: all 250ms ease-in;
    transform-origin: top center;
    animation: form-appearance 250ms forwards ease-in;
}

/**
 * Comment field
 */
.form .comment {
    width: 100%;
    padding-bottom: var(--space);
}

.form .comment textarea {
    background: var(--color-background-contrast);
    border-radius: var(--radius);
    padding: var(--space);
    border: 2px solid var(--color-background);
    opacity: 0.85;
    box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.1);
    width: 100%;
    resize: none;
    outline: 0;
    transition: all 150ms ease-in;
}

.form .comment textarea:hover, .form .comment textarea:focus {
    opacity: 1;
    color: var(--color-dark);
    border-color: var(--color-primary);
}


/**
 * Button
 */
.form .button {
    padding: var(--space);
    line-height: 1;
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    border: 0;
    border-radius: var(--radius);
    width: 100%;
    opacity: 0.85;
    transition: all 150ms ease-in;
    cursor: pointer;
}

.form .button:hover, .form .button:focus {
    opacity: 1;
}

.form .button[disabled], .form .button[disabled]:hover, .form .button[disabled]:focus {
    filter: grayscale(0.5);
    opacity: 1;
    cursor: not-allowed;
}

.attribute > .actions {
    font-size: 0.75em;
}

.attribute > .actions a {
    color: var(--color-primary);
    text-decoration: none;
}

/**
 * Points
 */
.points {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: var(--space) 0;
}

/**
 * Point
 */
.point {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 calc(var(--space) / 2);
    transform-origin: center;
    transition: all 150ms ease-in;
}

.is-scale .point {
    margin: 0 calc(var(--space) / 4);
}

/**
 * Point > Symbol
 */
.point > .symbol {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    font-size: 1.5em;
    line-height: 1;
    transform-origin: center;
    transition: all 150ms ease-in;
}

.point > .symbol * {
    max-width: 100%;
    max-height: 100%;
}

/**
 * Point > Label
 */

.point > .label {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(25%) scale(0);
    margin: auto;
    white-space: nowrap;
    padding: calc(var(--space) / 4) calc(var(--space) / 2);
    line-height: 1;
    border-radius: var(--radius);
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    text-transform: uppercase;
    font-size: 0.75em;
    transition: all 150ms ease-in;
}

.position-below .point > .label {
    transform: translateX(-50%) translateY(200%) scale(0);

}

/**
 * Point [HOVER|FOCUS]
 */
.can-rate .point:focus .label,
.can-rate .point.has-focus .label,
.can-rate .point:hover .label {
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) scale(1);
}

.position-below .can-rate .point:focus .label,
.position-below .can-rate .point.has-focus .label,
.position-below .can-rate .point:hover .label {
    opacity: 1;
    transform: translateX(-50%) translateY(300%) scale(1);
}

/**
 * Point [UNSELECTED]
 */
.can-rate .point,
.can-rate.is-scale .points:hover .point:hover ~ .point,
.can-rate.is-scale.has-focus .points .point.has-focus ~ .point,
.can-rate.is-scale.has-focus .points .point:focus ~ .point,
.is-scale .point.is-checked ~ .point:not(.is-checked),
.has-checked.is-scale .point.is-checked ~ .point:not(.is-checked),
.has-rated.is-count .is-unchecked {
    filter: grayscale(1);
}

/**
 * Point [SELECTED]
 */
.can-rate.is-scale:hover .points:hover .point,
.can-rate.is-scale.has-focus .points .point:focus,
.can-rate.is-scale.has-focus .points .point,
.can-rate.is-scale.has-focus.has-score .points .point,
.can-rate.is-scale.has-checked .points .point,
.can-rate.has-score.is-scale .point,
.can-rate.has-score.is-scale .point:focus,
.can-rate.has-score.is-scale .point:hover {
    filter: none;
}

/**
 * Count point [SELECTED]
 */
.can-rate.is-count .points .point.is-checked,
.can-rate.is-count .points .point:focus,
.can-rate.is-count .points .point.has-focus,
.can-rate.is-count .points:hover .point:hover {
    filter: none;
}

/**
 * Count point [CHECKED]
 */
.can-rate.is-count .points .point.is-checked .symbol,
.can-rate.is-count .points:hover .point:hover:not(.is-checked) .symbol {
    transform: scale(1.35);
}

/**
 * Score
 */
.score {
    font-size: 1em;
    line-height: 1;
    padding: calc(var(--space) / 2) 0;
}

/**
 * Error
 */
.error {
    padding: calc(var(--space) / 2) calc(var(--space));
    margin: calc(var(--space) / 2);
    background: var(--color-error);
    color: var(--color-error-contrast);
    border-radius: var(--radius);
    line-height: 1.5;
    font-size: 0.75em;
}