.dijit {
    &Tab {
        height: $tab-height;
        background-color: $tab-normal-bgcolor;
        color: $tab-normal-textcolor;
        padding: 0 $tab-padding;
        position: relative;

        border-width: $tab-border-width;
        border-style: $tab-border-style;
        border-color: transparent;

        .tabLabel {
            line-height: $tab-label-height;
            text-transform: uppercase;
        }

        .dijitTabContainerTop-tabs & {
            top: -1px;
        }

        &.dijitClosable {
            padding-right: $tab-padding + $spacing-1;
        }

        &PaneWrapper {
            .dijitContentPane {
                padding: $tab-padding;
                overflow: visible;
            }
        }

        &Checked,
        &Checked.dijitTabCheckedHover {
            background-color: $tab-active-bgcolor;
            border-width: $tab-checked-border-width;
            border-style: $tab-checked-border-style;
            border-color: $tab-checked-border-color;
            height: $tab-height + $field-border-size;
        }

        &CloseIcon {
            width: 13px;
            height: 13px;
            background-color: $tab-closeicon-bgcolor;
            position: absolute;
            right: 0;
            top: 0;
            margin-left: 0;

            &:before,
            &:after {
                background-color: $tab-closeicon-color;
                display: block;
                content: "";
                width: 1px;
                height: 8px;
                font-size: 0;
                position: absolute;
                left: 7px;
                top: 3px;
            }

            &:before {
                transform: rotate(45deg);
            }

            &:after {
                transform: rotate(-45deg);
            }
        }

        &Hover {
            background-color: $tab-hover-bgcolor;
            color: $tab-hover-textcolor;
        }

        &Disabled {
            background-color: $tab-disabled-bgcolor;
            color: $tab-disabled-textcolor;
        }

        &.tabStripButton {
            height: $tab-height !important;
            width: $tab-height;
            background-color: $tab-strip-normal-bgcolor;

            .dijitTabStripSlideLeftIcon {
                &:before {
                    // TODO: add option so user can add image icon
                    @include create-arrow(
                        $tab-strip-arrow-size,
                        $tab-strip-normal-arrow-color,
                        left
                    );
                }
            }

            .dijitTabStripSlideRightIcon {
                &:before {
                    // TODO: add option so user can add image icon
                    @include create-arrow(
                        $tab-strip-arrow-size,
                        $tab-strip-normal-arrow-color,
                        right
                    );
                }
            }

            .dijitTabStripMenuIcon {
                &:before {
                    // TODO: add option so user can add image icon
                    @include create-arrow($tab-strip-arrow-size, $tab-strip-normal-arrow-color);
                }
            }

            &Hover {
                background-color: $tab-hover-bgcolor;

                .dijitTabStripSlideLeftIcon {
                    &:before {
                        border-right-color: $tab-strip-hover-arrow-color;
                    }
                }

                .dijitTabStripSlideRightIcon {
                    &:before {
                        border-left-color: $tab-strip-hover-arrow-color;
                    }
                }

                .dijitTabStripMenuIcon {
                    &:before {
                        border-top-color: $tab-strip-hover-arrow-color;
                    }
                }
            }

            &Active {
                background-color: $tab-strip-active-bgcolor;

                .dijitTabStripSlideLeftIcon {
                    &:before {
                        border-right-color: $tab-strip-active-arrow-color;
                    }
                }

                .dijitTabStripSlideRightIcon {
                    &:before {
                        border-left-color: $tab-strip-active-arrow-color;
                    }
                }

                .dijitTabStripMenuIcon {
                    &:before {
                        border-top-color: $tab-strip-active-arrow-color;
                    }
                }
            }

            &Disabled {
                background-color: $tab-disabled-bgcolor;
                color: $tab-disabled-textcolor;

                .dijitTabStripSlideLeftIcon {
                    &:before {
                        border-right-color: $tab-strip-disabled-arrow-color;
                    }
                }

                .dijitTabStripSlideRightIcon {
                    &:before {
                        border-left-color: $tab-strip-disabled-arrow-color;
                    }
                }

                .dijitTabStripMenuIcon {
                    &:before {
                        border-top-color: $tab-strip-disabled-arrow-color;
                    }
                }
            }
        }

        &ContainerBottom-container,
        &ContainerTop-container,
        &ContainerLeft-container,
        &ContainerRight-container {
            border-width: $tab-container-border-width;
            border-style: $tab-container-border-style;
            border-color: $tab-container-border-color;
        }

        &ContainerTop-container {
            /* 42px is the height of the dijitTabListContainer */
            height: calc(100% - 42px);
            border-top: none;
            overflow: auto;
        }

        &ContainerBottom-container {
            border-bottom: none;
        }

        &ContainerTop-tabs,
        &ContainerBottom-tabs {
            height: $tab-height + ($field-border-size * 2);
            border: none;
        }

        &ListContainer-top,
        &ListContainer-bottom {
            box-sizing: "content-box";
            border-width: $tab-list-container-border-width;
            border-style: $tab-list-container-border-style;
            border-color: $tab-list-container-border-color;
            height: $tab-height !important;
            overflow: visible;
        }

        &ListContainer-bottom {
            .dijitTabListWrapper {
                top: -1px !important;
            }

            .dijitTabChecked {
                top: -1px;
                height: $tab-height + ($field-border-size * 2);
            }
        }

        &ContainerNested {
            .dijitTab {
                background: none;
                border: none;

                &.dijitTabChecked {
                    height: $tab-height + ($field-border-size * 2);
                    border-bottom: $tab-nested-active-border;
                }
            }

            .dijitTabContainerTop-tabs {
                //border-bottom: $tab-border;
            }

            .dijitTabContainerTop-container {
                border: none;
                padding: 0 $tab-padding;
            }
        }
    }
}
