/**
 * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).
 *
 * WSO2 LLC. 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.
 */

@import "Theme";

.display {
  width: fit-content;
  min-width: 200px;
  color: $text-color;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 40%;
  overflow-wrap: break-word;
  margin: 3rem 0;
  background-image: $background-image, $background-gradient;
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: contain;
  border: $border-primary;
  border-radius: 10px;
}

.title {
  font-size: 1.2em;
}

.btngrp {
  margin: 8px 0;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.btn {
  background-color: $btn-color-primary;
  border: none;
  color: $text-color;
  padding: 8px 10px;
  font-size: 14px;
  cursor: pointer;
  margin: 5px 0;
  border-radius: 4%;
  width: 120px;
}

.btn:hover {
  background-color: $btn-hover-color;
  color: #36454f;
}

.selection-btn {
  background-color: $btn-color-secondary;
  border: none;
  color: $text-color;
  padding: 8px 10px;
  font-size: 14px;
  cursor: pointer;
  margin: 5px 0;
  border-radius: 4%;
  width: 120px;
}

.link {
  color: $link-color;
  text-decoration: none;
}
