.tbxforms-select {
    @include tbxforms-font($size: 'default', $line-height: 1.25);

    box-sizing: border-box; // should this be global?
    max-width: 100%;
    min-height: 40px;
    padding: $tbxforms-in-field-spacer;
    border: $tbxforms-border-width-form-element solid
        $tbxforms-input-border-colour;

    &:focus {
        outline: $tbxforms-focus-width solid $tbxforms-focus-colour;
        // Ensure outline appears outside of the element
        outline-offset: 0;
        // Double the border by adding its width again. Use `box-shadow` to do
        // this instead of changing `border-width` (which changes element size) and
        // since `outline` is already used for the yellow focus state.
        box-shadow: inset 0 0 0 $tbxforms-border-width-form-element;
    }
}

.tbxforms-select option:active,
.tbxforms-select option:checked,
.tbxforms-select:focus::-ms-value {
    color: $tbxforms-active-colour;
    background-color: $tbxforms-active-bg;
}

.tbxforms-select--error {
    border: $tbxforms-border-width-form-element-error solid
        $tbxforms-error-colour;

    &:focus {
        border-color: $tbxforms-input-border-colour;
    }
}
