// jBox plugin: Notice

.jBox-Notice {
  transition: margin .2s;

  .jBox-container {
    border-radius: 4px;
    box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, .25), inset -1px -1px 0 0 rgba(0, 0, 0, .1);
  }

  .jBox-content {
    border-radius: 4px;
    padding: 12px 20px;

    @media (max-width: 768px) {
      padding: 10px 15px;
    }

    @media (max-width: 500px) {
      padding: 8px 10px;
    }
  }

  &.jBox-hasTitle {
    .jBox-content {
      padding-top: 5px;

      @media (max-width: 500px) {
        padding-top: 0;
      }
    }

    .jBox-title {
      padding: 12px 20px 0;
      font-weight: bold;

      @media (max-width: 768px) {
        padding: 10px 15px 0;
      }

      @media (max-width: 500px) {
        padding: 8px 10px 0;
      }
    }
  }

  &.jBox-closeButton-title {
    .jBox-title {
      padding-right: 55px;
    }

    &.jBox-hasTitle {
      .jBox-closeButton {
        width: 40px;
      }
    }
  }

  &.jBox-Notice-black {
    .jBox-container {
      color: #fff;
      background: #000;
    }

    &.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton {

      path,
      &:hover path {
        fill: #fff;
      }
    }
  }

  &.jBox-Notice-gray {
    .jBox-container {
      color: #222;
      background: #f6f6f6;
    }

    &.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton {

      path,
      &:hover path {
        fill: #222;
      }
    }
  }

  &.jBox-Notice-red {
    .jBox-container {
      color: #fff;
      background: #d00;
    }

    &.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton {

      path,
      &:hover path {
        fill: #fff;
      }
    }
  }

  &.jBox-Notice-green {
    .jBox-container {
      color: #fff;
      background: #5d0;
    }

    &.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton {

      path,
      &:hover path {
        fill: #fff;
      }
    }
  }

  &.jBox-Notice-blue {
    .jBox-container {
      color: #fff;
      background: #49d;
    }

    &.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton {

      path,
      &:hover path {
        fill: #fff;
      }
    }
  }

  &.jBox-Notice-yellow {
    .jBox-container {
      color: #000;
      background: #fd0;
    }

    &.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton {

      path,
      &:hover path {
        fill: #fff;
      }
    }
  }
}
