%header-icon {
    width: rem-calc(30);
    height: rem-calc(30);
    cursor: pointer;
}

.#{$package-prefix}-panel {
    position: relative;
    width: 100%;
    margin-bottom: rem-calc(4);
    background-color: $very-light-gray;

    > .header {
        @include sia-header-bar;
        cursor: pointer;

        .title {
            display: block;
        }

        .buttons {
            list-style: none;
            margin-top: rem-calc(-24);

            li {
                display: inline-block;
                margin-left: rem-calc(10);

                img {
                    width: rem-calc(30);
                    height: rem-calc(30);
                    transition: all $global-transition-speed;
                    cursor: pointer;
                }
                
                &.trigger {
                    @extend %header-icon;
                    background-image: sai-arrow-small-down-svg();

                    &.open {
                        background-image: sai-arrow-small-up-svg();
                    }
                }
                
                &.close {
                    @extend %header-icon;
                    background-image: sai-icon-close-svg();
                }
                
                &.move {
                    @extend %header-icon;
                    background-image: sai-icon-move-svg();
                }
                
                &.plus {
                    @extend %header-icon;
                    background-image: sai-icon-plus-svg();
                }  
            }
        }
    }

    > .content {
        width: 100%;
        padding: rem-calc(20);
        overflow-x: auto;
    }

    > .footer {
        @include sia-footer-bar;
    }
}