// ==================================================
// Predefined buttons with Icons
// ==================================================

$btns: (
    'save': (
        'background-color': theme-color('success'),
        'border-color': theme-color('success'),
        'color': $btn-color-light,
        'icon': 'check',
        'hover': (
            'background-color': theme-color('success'),
            'border-color': theme-color('success'),
            'color': $btn-color-light,
        )
    ),
    'outline-save': (
        'background-color': none,
        'border-color': theme-color('success'),
        'color': theme-color('success'),
        'icon': 'check',
        'hover': (
            'background-color': theme-color('success'),
            'border-color': theme-color('success'),
            'color': map-get($colors, white),
        )
    ),
    'delete': (
        'background-color': theme-color('danger'),
        'border-color': theme-color('danger'),
        'color': $btn-color-light,
        'icon': 'delete',
        'hover': (
            'background-color': theme-color('danger'),
            'border-color': theme-color('danger'),
            'color': $btn-color-light,
        )
    ),
    'outline-delete': (
        'background-color': none,
        'border-color': theme-color('danger'),
        'color': theme-color('danger'),
        'icon': 'delete',
        'hover': (
            'background-color': theme-color('danger'),
            'border-color': theme-color('danger'),
            'color': map-get($colors, white),
        )
    ),
    'cancel': (
        'background-color': theme-color('secondary'),
        'border-color': theme-color('secondary'),
        'color': $btn-color-light,
        'icon': 'clear',
        'hover': (
            'background-color': theme-color('secondary'),
            'border-color': theme-color('secondary'),
            'color': $btn-color-light,
        )
    ),
    'outline-cancel': (
        'background-color': none,
        'border-color': theme-color('danger'),
        'color': theme-color('danger'),
        'icon': 'clear',
        'hover': (
            'background-color': theme-color('danger'),
            'border-color': theme-color('danger'),
            'color': map-get($colors, white),
        )
    ),
    'edit': (
        'background-color': theme-color('light'),
        'border-color': theme-color('light'),
        'color': $btn-color-dark,
        'icon': 'edit',
        'hover': (
            'background-color': theme-color('light'),
            'border-color': theme-color('light'),
            'color': $btn-color-dark,
        )
    ),
    'outline-edit': (
        'background-color': none,
        'border-color': theme-color('dark'),
        'color': theme-color('dark'),
        'icon': 'edit',
        'hover': (
            'background-color': theme-color('dark'),
            'border-color': theme-color('dark'),
            'color': map-get($colors, white),
        )
    ),
    'add': (
        'background-color': theme-color('success'),
        'border-color': theme-color('success'),
        'color': $btn-color-light,
        'icon': 'add',
        'hover': (
            'background-color': theme-color('success'),
            'border-color': theme-color('success'),
            'color': $btn-color-light,
        )
    ),
    'outline-add': (
        'background-color': map-get($grays, 200),
        'border-color': theme-color('dark'),
        'color': theme-color('dark'),
        'icon': 'add',
        'hover': (
            'background-color': theme-color('dark'),
            'border-color': theme-color('dark'),
            'color': map-get($colors, white),
        )
    ),
    'add-folder': (
        'background-color': theme-color('success'),
        'border-color': theme-color('success'),
        'color': $btn-color-light,
        'icon': 'create_new_folder',
        'hover': (
            'background-color': theme-color('success'),
            'border-color': theme-color('success'),
            'color': $btn-color-light,
        )
    ),
    'outline-folder': (
        'background-color': none,
        'border-color': theme-color('secondary'),
        'color': theme-color('secondary'),
        'icon': 'subdirectory_arrow_right',
        'hover': (
            'background-color': theme-color('secondary'),
            'border-color': theme-color('secondary'),
            'color': map-get($colors, white)
        )
    ),
    'help': (
        'background-color': theme-color('light'),
        'border-color': theme-color('light'),
        'color': $btn-color-dark,
        'icon': 'help',
        'hover': (
            'background-color': theme-color('light'),
            'border-color': theme-color('light'),
            'color': $btn-color-dark,
        )
    ),
    'outline-help': (
        'background-color': none,
        'border-color': theme-color('dark'),
        'color': $btn-color-dark,
        'icon': 'help',
        'hover': (
            'background-color': theme-color('dark'),
            'border-color': theme-color('dark'),
            'color': map-get($colors, white)
        )
    ),
    'download': (
        'background-color': theme-color('success'),
        'border-color': theme-color('success'),
        'color': $btn-color-light,
        'icon': 'file_download',
        'hover': (
            'background-color': theme-color('success'),
            'border-color': theme-color('success'),
            'color': $btn-color-light,
        )
    ),
    'outline-download': (
        'background-color': none,
        'border-color': theme-color('success'),
        'color': theme-color('success'),
        'icon': 'file_download',
        'hover': (
            'background-color': theme-color('success'),
            'border-color': theme-color('success'),
            'color': map-get($colors, white)
        )
    ),
    'upload': (
        'background-color': theme-color('success'),
        'border-color': theme-color('success'),
        'color': $btn-color-light,
        'icon': 'file_upload',
        'hover': (
            'background-color': theme-color('success'),
            'border-color': theme-color('success'),
            'color': $btn-color-light,
        )
    ),
    'outline-upload': (
        'background-color': none,
        'border-color': theme-color('success'),
        'color': theme-color('success'),
        'icon': 'file_upload',
        'hover': (
            'background-color': theme-color('success'),
            'border-color': theme-color('success'),
            'color': map-get($colors, white)
        )
    ),
    'config': (
        'background-color': theme-color('light'),
        'border-color': theme-color('light'),
        'color': $btn-color-dark,
        'icon': 'settings',
        'hover': (
            'background-color': theme-color('light'),
            'border-color': theme-color('light'),
            'color': $btn-color-dark,
        )
    ),
    'outline-config': (
        'background-color': none,
        'border-color': theme-color('secondary'),
        'color': theme-color('secondary'),
        'icon': 'settings',
        'hover': (
            'background-color': theme-color('secondary'),
            'border-color': theme-color('secondary'),
            'color': map-get($colors, white)
        )
    ),
    'replace': (
        'background-color': theme-color('secondary'),
        'border-color': theme-color('secondary'),
        'color': $btn-color-light,
        'icon': 'find_replace',
        'hover': (
            'background-color': theme-color('secondary'),
            'border-color': theme-color('secondary'),
            'color': $btn-color-light,
        )
    ),
    'outline-replace': (
        'background-color': none,
        'border-color': theme-color('secondary'),
        'color': theme-color('secondary'),
        'icon': 'find_replace',
        'hover': (
            'background-color': theme-color('secondary'),
            'border-color': theme-color('secondary'),
            'color': map-get($colors, white)
        )
    ),
    'move': (
        'background-color': theme-color('secondary'),
        'border-color': theme-color('secondary'),
        'color': $btn-color-light,
        'icon': 'subdirectory_arrow_right',
        'hover': (
            'background-color': theme-color('secondary'),
            'border-color': theme-color('secondary'),
            'color': $btn-color-light,
        )
    ),
    'outline-move': (
        'background-color': transparent,
        'border-color': theme-color('secondary'),
        'color': theme-color('secondary'),
        'icon': 'subdirectory_arrow_right',
        'hover': (
            'background-color': theme-color('secondary'),
            'border-color': theme-color('secondary'),
            'color': map-get($colors, white)
        )
    ),
    'prev': (
        'background-color': transparent,
        'border': none,
        'color': theme-color('dark'),
        'icon': 'chevron_left',
        'hover': (
            'background-color': rgba(theme-color('dark'), .1),
        )
    ),
    'next': (
        'background-color': transparent,
        'border': none,
        'color': theme-color('dark'),
        'icon': 'chevron_right',
        'hover': (
            'background-color': rgba(theme-color('dark'), .1),
        )
    ),
    'last-page': (
        'background-color': transparent,
        'border': none,
        'color': theme-color('dark'),
        'icon': 'last_page',
        'hover': (
            'background-color': rgba(theme-color('dark'), .1),
        )
    ),
    'first-page': (
        'background-color': transparent,
        'border': none,
        'color': theme-color('dark'),
        'icon': 'first_page',
        'hover': (
            'background-color': rgba(theme-color('dark'), .1),
        )
    )
);

.btn {
    cursor: default;
    padding: 6px 10px 6px 10px;

    .material-icons {
        vertical-align: middle;
    }
    &.btn-link .material-icons {
        font-size: inherit;
    }
    &.btn-link {
        border-radius: 0;
    }

    &:not([class*='outline-']):not([class^='outline-']):not([class*='btn-']):not([class^='btn-']) {
        background-color: map-get($colors, gray-light);
        color: $btn-color-dark;
    }

    &-icon {
        position: relative;

        &:after {
            @include material-icons;

            font-size: inherit;
            left: 8px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
    }

    &-outline {
        background-color: transparent;
    }

    &:disabled {
        cursor: not-allowed;
    }

    &:hover,
    &-active {
        &:not(:disabled) {
            cursor: pointer;
        }
        &:not([class*=' btn-']), &.btn-sm, &.btn-lg {
            background-color: darken(map-get($colors, gray-light), 7.5%);
            border-color: darken(map-get($colors, gray-light), 10%);
            color: $btn-color-dark;
        }
    }

    @each $iconName, $iconValues in $btns {
        // Generate background, border and color styles for all defined buttons in $btns map
        &-#{$iconName} {
            background-color: map-get($iconValues, 'background-color');
            border-color: map-get($iconValues, 'border-color');
            color: map-get($iconValues, 'color') !important;

            &:not(:disabled):hover {
                cursor: pointer;
            }

            @if type-of( map-get($iconValues, 'hover') ) == 'map' {
                $iconHoverValues: map-get($iconValues, 'hover');
                &:not(:disabled):hover,
                &.btn-active {
                    @if map-has-key($iconHoverValues, 'background-color') {
                        background-color: darken(map-get($iconHoverValues, 'background-color'), 7.5%);
                    }
                    @if map-has-key($iconHoverValues, 'border-color') {
                        border-color: darken(map-get($iconHoverValues, 'border-color'), 10%);
                    }
                    @if map-has-key($iconHoverValues, 'color') {
                        color: map-get($iconHoverValues, 'color') !important;
                    }
                }
            }

            &.btn-icon {
                padding-left: 30px;

                &:empty {
                    padding-left: 24px;
                    padding-top: 26px;
                }

                &:after {
                    content: '#{map-get($iconValues, 'icon')}';
                }
            }
        }
    }
}

// ==================================================
// Link button
// ==================================================

.btn-link {
    background: transparent;
    border-color: transparent;
    color: color(gray);
    padding: 2px;

    &:hover {
        color: theme-color(primary);
    }
}

// ==================================================
// Custom admin buttons
// ==================================================

// btn-toolbar is currently being used by the language buttons
.btn-toolbar {
    border: none;
    border-radius: $border-radius;
    cursor: pointer;
    position: relative;
}

// Label outside of buttons
.btn-label {
    @include google-chrome-font-offset-fix;

    margin-left: 10px;
    vertical-align: middle;
}

// Active state for move to button in file manager

.btn-move-active {
    background: theme-color(primary);
}