/**
 * CheckboxField Component Style for SaltUI
 * @author shanchao
 *
 * Copyright 2018-2019, SaltUI Team.
 * All rights reserved.
 */

 @require './SelectLayer'

$checkbox-checked-bg = $brand-primary
$checkbox-readonly-color = $dark-alpha-2
$checkbox-tip-color = $normal-alpha-5
$checkbox-div-height = 54px
$checkbox-icon-size = 24px

.{$prefix}-checkbox-field
    display block
    > .{$prefix}-field-box
        align-items: flex-start
    .t-group-list
        border-bottom none
        border-top-color transparent
        .t-group-list-item
            &:after
                border-bottom none
.{$prefix}-checkbox-field-value-wrap
    padding 12px 0
.{$prefix}-checkbox-field-readonly
    color $checkbox-readonly-color
    background-color #f9f9f9
    img
        opacity 0.6
    .{$prefix}-checkbox-field-row
            background-color transparent
    > .{$prefix}-group-list
        background-color #f9f9f9
.{$prefix}-checkbox-field-slot-mode-readonly
    color $checkbox-readonly-color

.{$prefix}-checkbox-field-icon-wrapper
    width $checkbox-icon-size
    min-height $checkbox-div-height
    vertical-align middle
    &.right
        margin-left 12px
        margin-right 16px
    + .{$prefix}-checkbox-field-content
        padding-right: 16px;
        padding-left: 12px;

.{$prefix}-checkbox-field-placeholder
    max-width 100%
    height 20px
    line-height 20px
    color $checkbox-tip-color

.{$prefix}-checkbox-field-icon-slot
    margin-top 10px
    svg
        fill $checkbox-tip-color

.{$prefix}-fix-slot-margin
    .{$prefix}-checkbox-field-icon-slot
        margin-top 0

.{$prefix}-checkbox-field-icon
    width: 24px;
    height: 24px;
    &.checked rect
        fill: $brand-primary

.{$prefix}-checkbox-field-icon-border
    .hairline &
        stroke-width: 0.5px

.{$prefix}-checkbox-field-content
    min-width 0
    //min-height $checkbox-div-height
    // padding-left 12px
    vertical-align middle
    font-size $font-size-t5
    color $dark-alpha-2
    line-height: 1.2
    padding-top: 10px;
    padding-bottom: 10px;
    // overflow hidden
    // text-overflow ellipsis
    // white-space nowrap

.{$prefix}-checkbox-field-row
    width 100%
    min-height $checkbox-div-height
    box-sizing border-box
    background-color $white-alpha-1
    &.disable
        position relative
        .{$prefix}-checkbox-field-disable-mask
            position absolute
            left 0
            right 0
            top 0
            bottom 0
            background-color $white-alpha-3

div.{$prefix}-checkbox-field-label
    line-height $font-size-field-label-lh
    padding 10px 15px
    background-color white

.{$prefix}-field-layout-label-required
    display inline
    svg
        vertical-align middle