/*
 * 
 *   Copyright 2016 RIFT.IO Inc
 *
 *   Licensed under the Apache License, Version 2.0 (the "License");
 *   you may not use this file except in compliance with the License.
 *   You may obtain a copy of the License at
 *
 *       http://www.apache.org/licenses/LICENSE-2.0
 *
 *   Unless required by applicable law or agreed to in writing, software
 *   distributed under the License is distributed on an "AS IS" BASIS,
 *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *   See the License for the specific language governing permissions and
 *   limitations under the License.
 *
 */

@import '../../style/colors.scss';

.eventCenter {
	background-color: $white;
	z-index: 9999;
	position: relative;

	[data-open-close-icon] {
	    &:after {
	        content: " ";
	        display: block;
	        float: right;
	        margin-right: 8px;
	        height: 51px;
	        width: 51px;
	        opacity: 0.25;
	        background-size: 20px 20px;
	        background-repeat: no-repeat;
	        background-position: center center;
	        /* background-image required in order for background-size to work*/
	        background-image: url(../../../node_modules/open-iconic/svg/caret-bottom.svg);
	        vertical-align: middle;
	    }
	    &:hover:after {
	        opacity: 1;
	    }
	}
	[data-open-close-icon="closed"]:after {
	    transform: rotate(180deg);
	    transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
	}
	[data-open-close-icon="open"]:after {
	    transform: rotate(0deg);
	    transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
	}


	.notification {
        .crouton {
            right: 4px;
            top: 34px;
            width: 30%;
            left: auto;
            .info {
                border-radius: 25px;
            }
        }
    }
	&.-with-transitions {
		transition: height 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
	}
	&.open {
		.notificationListBody {
			height: 300px;
		}
	}
	&.closed {
		.notificationListBody {
			height: 0px;
		}
	}
	.title {
		border-top: 1px solid $gray-dark;
		border-bottom: 1px solid $gray-dark;
		cursor: pointer;
		color: $gray-darker;
		font-style: normal;
		font-size: 1.625rem;
    	font-weight: 400;
		height: 51px;
  		line-height: 51px;
  		margin: 0;
		padding-left: 0;
		padding-right: 0;
		text-align: center;
		text-transform: uppercase;
		background-color: $gray-lighter;
	}
	.notificationListBody {
		overflow: auto;
		.notificationList {
			width: 100%;
			&:hover {
				overflow: auto;
			}
			
			.notificationItem {

			}

			th {
				text-align: left;
                padding: 0.5rem;
                background: $gray-darker;
                border: 1px solid black;
				color: $white;
				&.source {
					width: 20%;
				}
				&.timestamp {
					width: 20%;
				}
				&.event {
					width: 20%;
				}
				&.details {
					width: 40%;
				}
			}

			tr {
				padding: 0.5rem;
				border: 1px solid black;

				&:nth-child(odd) {
					background: $white;
					td {
	                    border: 1px solid black;
	                    padding: 0.5rem;
	                }
				}

				&:nth-child(even) {
					background: $gray-lighter;
					td {
	                    border: 1px solid black;
	                    padding: 0.5rem;
	                }
				}
			}
		}
	}
}