/*

Name: Fjord
Background: White
Color: Pink
Type: Skeuomorphic
Preview: https://yootheme.com/api/style/fjord/default.jpg

Style: white-green
Name: White Green
Background: White
Color: Green
Type: Skeuomorphic
Preview: https://yootheme.com/api/style/fjord/white-green.jpg

Style: light-blue
Name: Light Blue
Background: Light
Color: Blue
Type: Skeuomorphic
Preview: https://yootheme.com/api/style/fjord/light-blue.jpg

Style: blue-white
Name: Blue White
Background: Colored
Color: White
Type: Skeuomorphic
Preview: https://yootheme.com/api/style/fjord/blue-white.jpg

Style: dark-green
Name: Dark Green
Background: Dark
Color: Green
Type: Skeuomorphic
Preview: https://yootheme.com/api/style/fjord/dark-green.jpg

Style: black-orange
Name: Black Orange
Background: Black
Color: Orange
Type: Skeuomorphic
Preview: https://yootheme.com/api/style/fjord/black-orange.jpg

*/

// Platform
@import "platform.less";

// UIkit Core
@import "../vendor/assets/uikit/src/less/uikit.less";

// UIkit Theme
@import "../vendor/assets/uikit-themes/master/_import.less";
@import "../vendor/assets/uikit-themes/master-fjord/_import.less";

// Theme
@import "theme.less";


// Variables
// ========================================================================

//
// Toolbar
//

@theme-toolbar-font-size:                                11px;

//
// Header
//

@theme-headerbar-font-size:                              11px;

//
// Mask
//

@internal-theme-mask-default-border-image:              "../vendor/assets/uikit-themes/master-fjord/images/mask-default-image.avif";
@internal-theme-mask-default-border-image-slice:        200;
@internal-theme-mask-default-border-image-width:        100px;

@internal-theme-mask-default-image:                     "../vendor/assets/uikit-themes/master-fjord/images/mask-default-image.avif";

//
// Box Decoration
//

@theme-box-decoration-top:                               -30px;
@theme-box-decoration-bottom:                            -30px;
@theme-box-decoration-left:                              -30px;
@theme-box-decoration-right:                             -30px;

@theme-box-decoration-default-transform-horizontal:      0;
@theme-box-decoration-default-transform-vertical:        0;
@theme-box-decoration-default-background:                darken(@global-muted-background, 10%);

@theme-box-decoration-primary-transform-horizontal:      0;
@theme-box-decoration-primary-transform-vertical:        0;
@theme-box-decoration-primary-background:                @global-primary-background;

@theme-box-decoration-secondary-transform-horizontal:    0;
@theme-box-decoration-secondary-transform-vertical:      0;
@theme-box-decoration-secondary-background:              @global-secondary-background;

.hook-box-decoration() when not (@internal-theme-mask-default-border-image = ~'') {

    @supports (-webkit-mask-box-image-source: none) {
        &::before {
            -webkit-mask-box-image-source: url(@internal-theme-mask-default-border-image);
            mask-border: url(@internal-theme-mask-default-border-image);
            -webkit-mask-box-image-slice: @internal-theme-mask-default-border-image-slice fill;
            mask-border-slice: @internal-theme-mask-default-border-image-slice fill;
            -webkit-mask-box-image-repeat: @internal-theme-mask-default-border-image-repeat;
            mask-border-repeat: @internal-theme-mask-default-border-image-repeat;
        }
    }

    // Firefox Fallback
    @supports not (-webkit-mask-box-image-source: none) {
        &::before {
            mask-image: url(@internal-theme-mask-default-border-image);
            mask-size: 100% 100%;
        }
    }

}

//
// Inverse
//

@inverse-theme-box-decoration-default-background:        fade(@global-background, 40%);
@inverse-theme-box-decoration-primary-background:        @inverse-global-primary-background;
@inverse-theme-box-decoration-secondary-background:      @inverse-global-primary-background;

//
// Transition Border
//

@theme-transition-border-hover-border-width:             12px;

@internal-theme-transition-border-border-gradient:       linear-gradient(135deg, #FF4870, darken(spin(#FF4870, -14%), 18%));
@internal-theme-transition-border-hover-border-gradient: @internal-theme-transition-border-border-gradient;

//
// WooCommerce
//

//
// Rating
//

@woocommerce-rating-color:                               @global-primary-background;


// Style
// ========================================================================

@import (optional) "../vendor/assets/uikit-themes/master-fjord/styles/@{internal-style}.less";

@internal-style: ~'';