// * flat button ------------------------ //
.flat-button {
    border         : 0;
    border-radius  : 5px;
    font-family    : @main-font-medium;
    font-size      : 13px;
    text-transform : uppercase;
    cursor         : pointer;

    svg {
        display        : inline;
        margin-right   : 3px;
        vertical-align : middle;
        fill           : currentColor;
    }

    &.smaller-size { font-size: 11px; }

    &:disabled { cursor: default; }
}

// * Sizes ---------------------------- //
.button-w180 { width: 180px; }
.button-w150 { width: 150px; }
.button-w140 { width: 140px; }
.button-w115 { width: 115px; }
.button-w50  { width: 50px; }

.button-h32 {
    height      : 32px;
    line-height : 32px;
    font-size   : 10px;
}

.button-h35 {
    height      : 35px;
    line-height : 36px;
}

// * Colors --------------------------- //

// Dark
.flat-button-dark {
    background : #333333;
    color      : #ffffff;

    &:hover { background: #444444; }
    &:disabled {
        background : #222222;
        color      : #444444;
    }

    // On light background
    &.theme-light {
        background : #eeeeee;
        color      : rgba(34, 34, 34, .9);

        &:hover { background: #e6e6e6; }
        &:disabled {
            background : #f6f6f6;
            color      : #b6b6b6;
        }
    }
}

// Green
.flat-button-green {
    background : #61d483;
    color      : rgba(34, 34, 34, .9);

    &:hover { background: #57bf76; }
    &:disabled {
        background : #222222;
        color      : #444444;
    }

    // On light background
    &.theme-light {
        background: #73e594;

        &:hover { background: #6eda8d; }
        &:disabled {
            background : #f6f6f6;
            color      : #b6b6b6;
        }
    }
}

// Red
.flat-button-red  {
    background : #f66356;
    color      : rgba(34, 34, 34, .9);

    &:hover { background: #ea5e52; }
    &:disabled {
        background : #f6f6f6;
        color      : #b6b6b6;
    }
}

// * toggle button ---------------------- //
.toggle {
    .m-toggle-size(2, 360px, 34px, 26px, 11px, 5px);
    .m-toggle-color(darken(#ffffff, 6.5%), #777777);
    box-sizing: border-box;

    margin     : 0 auto;
    list-style : none;

    li { float: left; }
}

.toggle-option {
    box-sizing: border-box;

    padding        : 0;
    border         : 0;
    text-transform : uppercase;
    fill           : #000000;

    &.active {
        background-color : #ffffff;
        color            : lighten(#000000, 13.5%);
    }
}

.toggle-dark {
    background-color: #393939;

    .toggle-option {
        color            : #aaaaaa;
        background-color : #393939;
    }
}

@switch-height: 26px;

.switch {
    user-select   : none;
    transition    : all 0.25s ease-in-out;
    width         : 45px;
    height        : @switch-height;
    position      : relative;
    display       : inline-block;
    outline       : none;
    overflow      : hidden;
    border-radius : 13px;
    cursor        : pointer;
}

.switch-filter {
    width            : 100%;
    height           : 100%;
    position         : absolute;
    display          : none;
    opacity          : 0.5;
    z-index          : 6;
    background-color : #ffffff;
}

.switch-separator {
    transition       : left 0.25s ease-in-out;
    height           : @switch-height - 4;
    width            : @switch-height - 4;
    position         : relative;
    margin           : 2px 21px;
    border-radius    : 50%;
    background-color : #ffffff;
}

.switch-disabled {
    cursor: default;
    .switch-filter { display: block; }
}

.switch-off {
    background-color: #e9e9eb;
    .switch-separator { left: -19px; }
}
.switch-on {
    background-color: #5df086;
    .switch-separator { left: 0; }
}

// * Mixins --------------------------- //
.m-toggle-size (@toggle-states-count, @width, @height, @toggle-option-height, @font-size, @border-radius) {
    @toggle-option-margin: (@height - @toggle-option-height) / 2;

    width         : @width;
    height        : @height;
    border-radius : @border-radius;

    .toggle-option {
        width         : (@width / @toggle-states-count) - (@toggle-option-margin * @toggle-states-count);
        height        : @toggle-option-height;
        margin        : @toggle-option-margin;
        border-radius : @border-radius;
        font-size     : @font-size;
    }
}

.m-toggle-color (@background-color, @font-color) {
    background-color : @background-color;

    .toggle-option {
        background-color : @background-color;
        color            : @font-color;

        &.active {
            background-color : #ffffff;
            color            : lighten(#000000, 13.5%);
        }
    }
}