@use "sass:color";
@use "variables.scss";

/* Anvil Component */

/* Anvil Button */

// Button sizes
@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
    padding: $padding-vertical $padding-horizontal;
    // font-size: $font-size;
    line-height: $line-height;
    border-radius: $border-radius;
}

.anvil-btn {
    display: inline-block;
    margin-bottom: 0; // For input.btn
    // font-weight: $btn-font-weight;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
    border: 1px solid transparent;
    @include button-size(variables.$padding-base-vertical, variables.$padding-base-horizontal, variables.$font-size-base, variables.$line-height-base, variables.$btn-border-radius-base);
    user-select: none;

    &,
    &:active,
    &.active {
        &:focus,
        &.focus {
            // .tab-focus();
        }
    }

    &:hover,
    &:focus,
    &.focus {
        color: variables.$btn-default-color;
        text-decoration: none;
    }

    &:active,
    &.active {
        background-image: none;
        outline: 0;
        //   .box-shadow(inset 0 3px 5px rgba(0, 0, 0, .125));
    }

    &.disabled,
    &[disabled] {
        //   cursor: $cursor-disabled;
        opacity: 0.65;
        box-shadow: none;
    }
}

// Alternate buttons
// --------------------------------------------------

@mixin button-variant($color, $background, $border) {
    color: $color;
    background-color: $background;
    border-color: $border;

    &:focus,
    &.focus {
        color: $color;
        background-color: color.adjust($background, $lightness: -10%);
        border-color: color.adjust($border, $lightness: -25%);
    }
    &:hover {
        color: $color;
        background-color: color.adjust($background, $lightness: -10%);
        border-color: color.adjust($border, $lightness: -12%);
    }
    &:active,
    &.active {
        color: $color;
        background-color: color.adjust($background, $lightness: -10%);
        background-image: none;
        border-color: color.adjust($border, $lightness: -12%);

        &:hover,
        &:focus,
        &.focus {
            color: $color;
            background-color: color.adjust($background, $lightness: -17%);
            border-color: color.adjust($border, $lightness: -25%);
        }
    }
    &.anvil-disabled,
    &[disabled] {
        &:hover,
        &:focus,
        &.focus {
            background-color: $background;
            border-color: $border;
        }
    }
}

.#{variables.$prefix}btn-default {
    @include button-variant(variables.$btn-default-color, variables.$btn-default-bg, variables.$btn-default-border);
}
.#{variables.$prefix}btn-primary {
    @include button-variant(variables.$btn-primary-color, variables.$btn-primary-bg, variables.$btn-primary-border);
}
// Success appears as green
.#{variables.$prefix}btn-success {
    @include button-variant(variables.$btn-success-color, variables.$btn-success-bg, variables.$btn-success-border);
}
// Info appears as blue-green
.#{variables.$prefix}btn-info {
    @include button-variant(variables.$btn-info-color, variables.$btn-info-bg, variables.$btn-info-border);
}
// Warning appears as orange
.#{variables.$prefix}btn-warning {
   @include button-variant(variables.$btn-warning-color, variables.$btn-warning-bg, variables.$btn-warning-border);
}
// Danger and error appear as red
.#{variables.$prefix}btn-danger {
    @include button-variant(variables.$btn-danger-color, variables.$btn-danger-bg, variables.$btn-danger-border);
}

.#{variables.$prefix}btn-default {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    &:hover,
    &:focus {
        background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
        background-position: 0 0;
    }
}

.#{variables.$prefix}btn {
    min-height: calc(12px + 1.5em); /* account for padding */
}

.anvil-button > button > .#{variables.$prefix}button-text {
    white-space: pre-wrap;
}

.anvil-component-icon-present.#{variables.$prefix}left_edge-icon > button {
    position: relative;
    padding-left: 1.75em;
}
.anvil-component-icon-present.#{variables.$prefix}right_edge-icon > button {
    position: relative;
    padding-right: 1.75em;
}

/* Anvil Canvas */

/* Anvil CheckBox/RadioButton */

// Checkboxes and radios
//
// Indent the labels to position radios/checkboxes as hanging controls.

.#{variables.$prefix} {
    &checkbox,
    &radio {
        position: relative;
        display: block;
        margin-top: 10px;
        margin-bottom: 10px;

        &[disabled] label {
            cursor: not-allowed;
        }

        label {
            cursor: pointer;
            padding: 7px 7px 7px 20px;
            min-height: 20px;
            margin-bottom: 0;
        }

        input {
            position: absolute;
            margin-left: -20px;
            line-height: normal;
            margin-top: calc(0.75em - 7px);
        }
    }
}

div.#{variables.$prefix}checkbox {
    margin-top: 0;
    margin-bottom: 0;
}

/* Anvil Column Panel */

/* Anvil Data Grid */

/* Anvil Data Row Panel */

/* Anvil Date Picker */

/* Anvil DropDown */

/* Anvil File Loader */

/* Anvil Flow Panel */

.#{variables.$prefix}flow-panel > .#{variables.$prefix}flow-panel-gutter {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}
.#{variables.$prefix}flow-panel > .#{variables.$prefix}flow-panel-gutter > .#{variables.$prefix}flow-panel-item {
    flex: 0 1 auto;
}

.#{variables.$prefix}flow-panel.#{variables.$prefix}flow-spacing-none > .#{variables.$prefix}flow-panel-gutter {
    margin-left: 0;
    margin-right: 0;
}
.#{variables.$prefix}flow-panel.#{variables.$prefix}flow-spacing-tiny > .#{variables.$prefix}flow-panel-gutter {
    margin-left: -5px;
    margin-right: -5px;
}
.#{variables.$prefix}flow-panel.#{variables.$prefix}flow-spacing-small > .#{variables.$prefix}flow-panel-gutter {
    margin-left: -10px;
    margin-right: -10px;
}
.#{variables.$prefix}flow-panel.#{variables.$prefix}flow-spacing-medium > .#{variables.$prefix}flow-panel-gutter {
    margin-left: -15px;
    margin-right: -15px;
}
.#{variables.$prefix}flow-panel.#{variables.$prefix}flow-spacing-large > .#{variables.$prefix}flow-panel-gutter {
    margin-left: -20px;
    margin-right: -20px;
}
.#{variables.$prefix}flow-panel.#{variables.$prefix}flow-spacing-huge > .#{variables.$prefix}flow-panel-gutter {
    margin-left: -30px;
    margin-right: -30px;
}

.#{variables.$prefix}flow-panel.#{variables.$prefix}flow-spacing-none > .#{variables.$prefix}flow-panel-gutter > .#{variables.$prefix}flow-panel-item {
    margin-left: 0;
    margin-right: 0;
}
.#{variables.$prefix}flow-panel.#{variables.$prefix}flow-spacing-tiny > .#{variables.$prefix}flow-panel-gutter > .#{variables.$prefix}flow-panel-item {
    margin-left: 5px;
    margin-right: 5px;
}
.#{variables.$prefix}flow-panel.#{variables.$prefix}flow-spacing-small > .#{variables.$prefix}flow-panel-gutter > .#{variables.$prefix}flow-panel-item {
    margin-left: 10px;
    margin-right: 10px;
}
.#{variables.$prefix}flow-panel.#{variables.$prefix}flow-spacing-medium > .#{variables.$prefix}flow-panel-gutter > .#{variables.$prefix}flow-panel-item {
    margin-left: 15px;
    margin-right: 15px;
}
.#{variables.$prefix}flow-panel.#{variables.$prefix}flow-spacing-large > .#{variables.$prefix}flow-panel-gutter > .#{variables.$prefix}flow-panel-item {
    margin-left: 20px;
    margin-right: 20px;
}
.#{variables.$prefix}flow-panel.#{variables.$prefix}flow-spacing-huge > .#{variables.$prefix}flow-panel-gutter > .#{variables.$prefix}flow-panel-item {
    margin-left: 30px;
    margin-right: 30px;
}

/* Only a single class name here (not .flow-panel.foo) so that a simple role can override it. */
.#{variables.$prefix}flow-panel.#{variables.$prefix}vertical-align-top > .#{variables.$prefix}flow-panel-gutter { align-items: flex-start; }
.#{variables.$prefix}flow-panel.#{variables.$prefix}vertical-align-middle > .#{variables.$prefix}flow-panel-gutter { align-items: center; }
.#{variables.$prefix}flow-panel.#{variables.$prefix}vertical-align-bottom > .#{variables.$prefix}flow-panel-gutter { align-items: flex-end; }
/* Choosing "full" is like not setting vertical_align at all. Don't add the style at all in this case,
   so anyone who has overridden this manually is not affected. */
/*.#{variables.$prefix}flow-panel.#{variables.$prefix}vertical-align-full > .#{variables.$prefix}flow-panel-gutter { align-items: stretch; }*/


/* Anvil Goolge Map */

/* Anvil Grid Panel */

/* Anvil Html Panel */

/* Anvil Image */

/* Anvil Invalid Component */

/* Anvil Lable */

/* Anvil Linear Panel */

.#{variables.$prefix}linear-panel {
    padding: 0px;
    /* overflow settings removed because they cause scroll bars on FF. Don't think we need them anyway. */
    /*overflow-y: auto;
	overflow-x: hidden;*/
}

ul.#{variables.$prefix}linear-panel {
    list-style-type: none;
    margin: 0;
}

/* Anvil Link */

/* Anvil Paginator */

/* Anvil Plot */

/* Anvil Repeating Panel */

/* Anvil RichText */

/* Anvil Spacer */

/* Anvil TextArea */

/* Anvil TextBox */

/* Anvil XY Panel */

.anvil-xy-panel > .anvil-holder > .anvil-component {
    margin: 0;
}

/* Anvil YouTube Video */
