$font-family: 'Segoe UI', sans-serif;

@mixin base-container (
    $selectable-padding: 5px,
    $selectable-hover-background: rgba(0, 0, 0, 0.1),
    $selectable-active-background: rgba(0, 0, 0, 0.15)
) {
    .ac-container {
        &.ac-selectable {
            padding: $selectable-padding;

            &:hover {
                background-color: $selectable-hover-background;
            }

            &:active {
                background-color: $selectable-active-background;
            }
        }
    }
}

.ac-image.ac-selectable {
    cursor: pointer;
}

@mixin base-push-button(
    $font-size: 14px, 
    $font-weight: 600, 
    $border: none, 
    $padding: 4px 10px 5px 10px, 
    $background-color: #0078D7,
    $color: white,
    $user-select: none,
    $hover-color: null,
    $hover-background-color: #005A9E,
    $hover-border: null,
    $active-color: null,
    $active-background-color: #004D84
     ) {

    .ac-pushButton {
        font-family: $font-family;
        font-size: $font-size;
        font-weight: $font-weight;
        overflow: hidden;
        text-overflow: ellipsis;
        border: $border;
        padding: $padding;
        text-align: center;
        vertical-align: middle;
        cursor: default;
        background-color: $background-color;
        color: $color;    
        user-select: $user-select;

        &:hover {
            background-color: $hover-background-color;
            border: $hover-border;
            color: $hover-color
        }

        &:active {
            background-color: $active-background-color;
            color: $active-color
        }
    }
}

@mixin base-link-button(
    $active-background-color: null,
    $active-color: #004D84,
    $background-color: transparent,
    $border: none,
    $color: #0078D7,
    $cursor: pointer,
    $font-size: 14px,
    $font-weight: 600,
    $hover-background-color: null,
    $hover-border: null,
    $hover-color: #005A9E,
    $padding: 0,
    $subdued: true,
    $text-align: null,
    $vertical-align: null
    ) {

    .ac-linkButton {
        font-family: $font-family;
        font-size: $font-size;
        font-weight: $font-weight;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: $cursor;
        border: $border;
        padding: $padding;
        text-align: $text-align;
        vertical-align: $vertical-align;
        color: $color;
        background-color: $background-color;
        user-select: none;

        &:hover {
            background-color: $hover-background-color;
            border: $hover-border;
            color: $hover-color;
        }

        &:active {
            background-color: $active-background-color;
            color: $active-color;
        }
        
        @if $subdued {
            &.ac-subdued {
                color: #666666;
                font-weight: 500;
            }

            &.ac-subdued:hover {
                color: #005A9E;
            }

            &.ac-subdued:active {
                color: #004D84;
            }
        }
    }

    /*
    Other styles that can be specified:
        .ac-linkButton.ac-expanded
        .ac-linkButton.ac-expanded:hover
        .ac-linkButton.ac-expanded:active
    */
}

@mixin base-input(
    $font-size: 14px,
    $padding: 4px 8px 4px 8px,
    $color: black,
    $border: 1px solid #DDDDDD,
    $hover-border: null,
    $background-color: null,
    $hover-background-color: null
    ) {

    .ac-input {
        font-family: $font-family;
        font-size: $font-size;
        color: $color;

        &.ac-textInput {
            height: 30px;
            resize: none;
        }

        &.ac-textInput.ac-multiline {
            height: 72px;
        }

        &.ac-textInput, &.ac-numberInput, &.ac-dateInput, &.ac-timeInput, &.ac-multichoiceInput {
            border: $border;
            padding: $padding;
            background-color: $background-color;

            &:hover {
                border: $hover-border;
                background-color: $hover-background-color;
            }
        }
    }
}