// Notify styling
// ==============

// Notify
// ======

@notify-color:#293141;
@notify-text-color:#fff;

@notify-icon-color:#fff;
@notify-icon-hover-color:darken(@notify-color, 30%);

@notify-button-color:#fff;
@notify-button-hover-color:darken(@notify-button-color, 30%);
@notify-button-text-color:#454545;
@notify-button-text-hover-color:#454545;

@notify-popup-padding-top:30px;
@notify-popup-padding-right:30px;
@notify-popup-padding-bottom:30px;
@notify-popup-padding-left:30px;

@notify-popup-padding:@notify-popup-padding-top @notify-popup-padding-right @notify-popup-padding-bottom @notify-popup-padding-left;

.notify {

    .notify-popup {
        background-color: @notify-color;
        color: @notify-text-color;

        a {
          outline: none;
          text-decoration: none;
        }

        h5 {
            font-size:24px;
            color:@notify-icon-color;
        }
    }

    .notify-type-prompt, .notify-type-alert {
        .notify-popup-inner {
            padding-top:@notify-popup-padding;
        }
    }

    .notify-popup-component-select {
        height: 400px;
        overflow-y: scroll;
    }

    .notify-popup-component-option {
      border: 1px solid;
      cursor: pointer;
      &:hover {
        background-color: gray; 
      }
      &.selected {
        background-color: navy;
      }
    }

    .notify-popup-component-option-icon {
      border: 1px solid;
      float: left;
      height: 50px;
      width: 50px;
      margin-right: 20px;
    }

    .notify-popup-layout-option {
      border: 1px solid;
      float: left;
      height: 50px;
      width: 100px;
      cursor: pointer;

      &:hover {
        background-color: gray;
      }
      &.selected{
        background-color: navy;
      }
    }

    .notify-popup-icon {
        .icon {
            font-size:60px;
            width:60px;
            height:60px;
            color: @notify-icon-color;
        }
    }

    .notify-popup-buttons {
        text-align:center;
        margin-top:10px;
    }

    .notify-popup-button {
        background-color:@notify-button-color;
        color:@notify-button-text-color;
        padding:6px;
        display:inline-block;
        .no-touch &:hover, &:focus {
            background-color:darken(@notify-button-hover-color, 10%);
            color:@notify-button-text-hover-color;
        }
    }

    .notify-popup-content-inner {
        padding-left:80px;
        @media all and (max-width:800px) {
            padding-left:0px;
        }
    }

    .notify-popup-inner {
        padding: @notify-popup-padding;
    }

    .notify-popup-toolbar {
        text-align:right;
    }

    .notify-popup-done {
        padding:@notify-popup-padding;
        display:inline-block;
    }

    .notify-popup-icon-close {
        color: @notify-icon-color;
        .no-touch &:hover {
            color:@notify-icon-hover-color;
        }
    }

    .notify-shadow {
        background-color: rgba(255,255,255,0.3);
    }
}

.notify-push {
    position:fixed;
    top:60px;
    right:20px;
    width:380px;
    background-color:@notify-color;
    transition:all 0.3s;
    opacity:0;
    margin-top:-30px;
    color:#fff;
    z-index:50;
    border: 1px solid @notify-text-color;
    border-radius:3px;
    @media all and (max-width:800px) {
        width:90%;
        max-width:380px;
        right:5%;
    }
    &.show {
        margin-top:0px;
        opacity:1;
    }
}

.notify-push-inner {
    padding:30px 0px 30px 30px;
    margin-right:(30px + 24px * 2);
    cursor: pointer;
}

.notify-push-close {
    display: inline-block;
    text-decoration: none;
    position:absolute;
    right:30px;
    top:50%;
    margin-top:-(24px/2);
    .icon {
        .no-touch &:hover {
            color:@notify-icon-hover-color;
        }
        color:@notify-icon-color;
    }
}