// Licensed to Cloudera, Inc. under one
// or more contributor license agreements.  See the NOTICE file
// distributed with this work for additional information
// regarding copyright ownership.  Cloudera, Inc. licenses this file
// to you 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.

.hue-bottom-slide-mask {
  position: absolute;
  inset: 0 0 0 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 9;
  transition: opacity 0.3s ease;
}

.fade-in {
  opacity: 1;
}

.fade-out {
  opacity: 0;
}

.hue-bottom-slide-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
  padding: 16px;
  z-index: 10;
  border-top: 1px solid #eee;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;

  .hue-bottom-slide-panel__title {
    font-weight: 300;
    margin-bottom: 12px;
    font-size: 16px;
    padding: 16px 0 0 24px;
  }

  /* Content section */
  .hue-bottom-slide-panel__content {
    padding: 16px 24px 24px 24px;
  }

  /* Footer with buttons */
  .hue-bottom-slide-panel__footer {
    display: flex;
    justify-content: space-between;
    padding: 16px 24px;
  }

  .hue-bottom-slide-panel__btn {
    padding: 6px 16px;
    border: none;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
  }
}

/* Animation classes */
.hue-bottom-slide-in {
  transform: translateY(0%);
  opacity: 1;
}

.hue-bottom-slide-out {
  opacity: 0;
}