@import '../../styles/constants';

/* Module Constants */
$side-pull-width: 20px;
$sidebar-padding: 20px;
$sidebar-width: 270px;
$pseudo-tab-height: 25px;
$grid-overlay-height: 100px;

.ElementPropertiesSidebarModule {
    position: fixed;
    top: $header-height;
    right: -#{$sidebar-width - 5px};
    z-index: $z-index-sidebar;

    box-sizing: border-box;
    width: $sidebar-width;
    height: calc(100% - #{$header-height});

    background-color: $primary-color-background;
    opacity: $ui-opacity;

    transition: right 0.1s ease-in-out;

    &--visible {
        right: 0;

        .ElementPropertiesSidebarModule__grid-overlay {
            display: inline-block;
        }
    }

    &__side-pull {
        position: absolute;
        top: 65px;
        left: -#{$side-pull-width};

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        width: $side-pull-width;
        height: #{2 * $side-pull-width};
        padding: 13px 0 13px 7px;

        background-color: inherit;
        border-radius: $side-pull-width 0 0 $side-pull-width;
        outline: none;
        cursor: pointer;

        & > span {
            width: 100%;
            height: 2px;

            background-color: $primary-color-white;
            border-radius: 1px;
        }
    }

    &__pseudo-tabs {
        width: 100%;
        height: calc(100% - #{$grid-overlay-height});

        &--parent-component-name {
            box-sizing: border-box;
            width: 100%;
            margin-bottom: 41px; /* Weird margin to nicely align pseudo tabs with pull tab. */
            padding: 0 $sidebar-padding;

            .InputComponent {
                margin-top: 0 !important;
            }
        }

        &--header {
            display: flex;
            flex-direction: row;
            align-items: flex-end;
            box-sizing: border-box;
            width: 100%;
            height: $pseudo-tab-height;
            padding: 0 $sidebar-padding;
        }

        &--tab {
            z-index: 1;

            display: flex;
            flex-basis: 0;
            flex-grow: 1;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            max-width: 50%;
            height: 100%;
            margin: 0 1px;
            padding: 0 5px;

            color: $primary-color-gray;
            font-size: 12px;
            font-family: $font-stack;

            background-color: $primary-color-white;
            border-radius: 3px 3px 0 0;
            cursor: pointer;

            span {
                width: 100%;
                overflow: hidden;

                white-space: nowrap;
                text-align: center;
                text-overflow: ellipsis;
            }
        }

        &--tab-active {
            color: $primary-color-white;

            background-color: $primary-color-background;
            border-color: $primary-color-white;
            border-style: solid;
            border-width: 1px 1px 0;
        }

        &--tab-inactive {
            &:hover {
                height: 105%;
            }
        }

        &--body {
            box-sizing: border-box;
            width: 100%;
            height: calc(100% - #{$pseudo-tab-height});
            margin-top: -1px;
            padding: 0 $sidebar-padding 20px;
            overflow-y: auto;

            border-top: solid 1px $primary-color-white;

            p {
                margin-top: 20px;

                color: $primary-color-white;
                font-weight: bold;
                font-size: 12px;
                text-transform: uppercase;
            }
        }
    }

    .InputComponent,
    .TextAreaComponent {
        margin-top: 10px;
    }

    &__grid-overlay {
        display: none;
        box-sizing: border-box;
        width: 100%;
        height: #{$grid-overlay-height};
        padding: $sidebar-padding;

        border-top: solid 1px $primary-color-white;

        &--selector {
            width: 100%;

            .CheckboxComponent {
                margin-bottom: 10px;
            }
        }
    }

    .ElementPropertiesSidebarModule__pseudo-tabs--parent-component-name {
        & ~ .ElementPropertiesSidebarModule__pseudo-tabs--body {
            height: calc(100% - 105px);
        }
    }
}